/*
 * ==========================================================
 * RaFi Community - Posts
 * Posts CSS
 * Version: Reaction UI Final v2
 * ==========================================================
 */


/*
|--------------------------------------------------------------------------
| Main Wrapper
|--------------------------------------------------------------------------
*/

.rafi-posts-wrapper {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Composer
|--------------------------------------------------------------------------
*/

.rafi-post-composer {
    width: 100%;
    max-width: 680px;

    margin: 0 auto 20px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.05);

    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Composer Top
|--------------------------------------------------------------------------
*/

.rafi-post-composer-top {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 16px;
}


/*
|--------------------------------------------------------------------------
| Avatar
|--------------------------------------------------------------------------
*/

.rafi-post-avatar {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;
}

.rafi-post-avatar img,
.rafi-post-avatar-placeholder {
    width: 46px;
    height: 46px;

    border-radius: 50%;

    object-fit: cover;
}

.rafi-post-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #1877f2;

    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Open Composer
|--------------------------------------------------------------------------
*/

.rafi-post-open-composer {
    flex: 1;

    min-height: 44px;

    padding: 10px 18px;

    border: 1px solid #e5e7eb;
    border-radius: 24px;

    background: #f5f6f7;

    color: #65676b;

    font-size: 15px;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.rafi-post-open-composer:hover {
    background: #eef0f2;
}


/*
|--------------------------------------------------------------------------
| Composer Panel
|--------------------------------------------------------------------------
*/

.rafi-post-composer-panel {
    border-top: 1px solid #eeeeee;

    padding: 18px;
}

.rafi-post-composer-panel[hidden] {
    display: none;
}


/*
|--------------------------------------------------------------------------
| Composer Header
|--------------------------------------------------------------------------
*/

.rafi-post-composer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 15px;

    border-bottom: 1px solid #eeeeee;
}

.rafi-post-composer-header h3 {
    margin: 0;

    font-size: 20px;
    font-weight: 700;
}

.rafi-post-close {
    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 50%;

    background: #f0f2f5;

    color: #555555;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Textarea
|--------------------------------------------------------------------------
*/

.rafi-post-content {
    width: 100%;
    min-height: 130px;

    padding: 15px;

    box-sizing: border-box;

    border: 0;

    background: #ffffff;

    resize: vertical;

    font-family: inherit;

    font-size: 16px;
    line-height: 1.6;

    outline: none;
}

.rafi-post-content::placeholder {
    color: #9ca3af;
}


/*
|--------------------------------------------------------------------------
| Composer Tools
|--------------------------------------------------------------------------
*/

.rafi-post-tools {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 12px 0;

    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;

    overflow-x: auto;
}

.rafi-post-tool {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 9px 12px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #444444;

    font-size: 14px;

    white-space: nowrap;

    cursor: pointer;
}

.rafi-post-tool:hover {
    background: #f3f4f6;
}

.rafi-tool-icon {
    font-size: 18px;
}


/*
|--------------------------------------------------------------------------
| Composer Bottom
|--------------------------------------------------------------------------
*/

.rafi-post-composer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-top: 15px;
}


/*
|--------------------------------------------------------------------------
| Visibility
|--------------------------------------------------------------------------
*/

.rafi-post-visibility {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #6b7280;

    font-size: 13px;
}

.rafi-post-visibility select {
    padding: 7px 10px;

    border: 1px solid #d1d5db;
    border-radius: 7px;

    background: #ffffff;

    font-size: 13px;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Post Submit
|--------------------------------------------------------------------------
*/

.rafi-post-submit {
    min-width: 100px;

    padding: 10px 22px;

    border: 0;
    border-radius: 8px;

    background: #1877f2;

    color: #ffffff;

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

    cursor: pointer;
}

.rafi-post-submit:hover {
    background: #166fe5;
}

.rafi-post-submit:disabled {
    opacity: 0.65;

    cursor: wait;
}


/*
|--------------------------------------------------------------------------
| Feed
|--------------------------------------------------------------------------
*/

.rafi-post-feed {
    width: 100%;
    max-width: 680px;

    margin: 0 auto;
}

.rafi-feed-header {
    margin: 25px 0 12px;
}

.rafi-feed-header h2 {
    margin: 0;

    font-size: 20px;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Empty Feed
|--------------------------------------------------------------------------
*/

.rafi-feed-empty {
    padding: 45px 25px;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: #ffffff;

    text-align: center;
}

.rafi-feed-empty-icon {
    margin-bottom: 12px;

    font-size: 38px;
}

.rafi-feed-empty h3 {
    margin: 0 0 8px;

    font-size: 20px;
}

.rafi-feed-empty p {
    max-width: 480px;

    margin: 0 auto;

    color: #6b7280;

    font-size: 14px;
    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Post Card
|--------------------------------------------------------------------------
*/

.rafi-post-card {
    position: relative;

    overflow: visible;
}


/*
|--------------------------------------------------------------------------
| Post Actions
|--------------------------------------------------------------------------
*/

.rafi-post-actions {
    position: relative;

    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 52px;

    padding: 8px 14px;

    border-top: 1px solid #eeeeee;

    background: #ffffff;

    overflow: visible;
}


/*
|--------------------------------------------------------------------------
| Reaction Area
|--------------------------------------------------------------------------
*/

.rafi-reaction-area {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    flex: 0 0 auto;
}


/*
|--------------------------------------------------------------------------
| Reaction Summary
|--------------------------------------------------------------------------
*/

.rafi-reaction-summary {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| Reaction Count
|--------------------------------------------------------------------------
*/

.rafi-reaction-count {
    display: inline-flex;
    align-items: center;

    gap: 3px;

    color: #65676b;

    font-size: 13px;
    line-height: 1;

    white-space: nowrap;

    user-select: none;
}


/*
|--------------------------------------------------------------------------
| Main Reaction Button
|--------------------------------------------------------------------------
*/

.rafi-main-reaction {
    position: relative;

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

    min-height: 36px;

    padding: 7px 11px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #65676b;

    font-family: inherit;

    font-size: 14px;
    font-weight: 500;

    white-space: nowrap;

    cursor: pointer;

    touch-action: manipulation;

    user-select: none;

    -webkit-user-select: none;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease;
}

.rafi-main-reaction:hover {
    background: #f0f2f5;
}

.rafi-main-reaction:active {
    transform: scale(0.96);
}

.rafi-main-reaction.is-reacted {
    color: #1877f2;

    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| Reaction Picker
|--------------------------------------------------------------------------
*/

.rafi-reaction-picker {
    position: absolute;

    left: 0;

    bottom: calc(100% + 7px);

    display: none;

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

    gap: 4px;

    width: max-content;

    padding: 7px 9px;

    background: #ffffff;

    border: 1px solid #e4e6eb;

    border-radius: 30px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.16);

    z-index: 99999;

    transform-origin: bottom left;
}


/*
|--------------------------------------------------------------------------
| Open Reaction Picker
|--------------------------------------------------------------------------
*/

.rafi-reaction-picker.is-open {
    display: flex;

    animation:
        rafiReactionPopupIn
        0.16s ease-out;
}


/*
|--------------------------------------------------------------------------
| Hidden Attribute
|--------------------------------------------------------------------------
*/

.rafi-reaction-picker[hidden] {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| Reaction Popup Animation
|--------------------------------------------------------------------------
*/

@keyframes rafiReactionPopupIn {

    from {
        opacity: 0;

        transform:
            translateY(7px)
            scale(0.86);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/*
|--------------------------------------------------------------------------
| Reaction Button
|--------------------------------------------------------------------------
*/

.rafi-reaction-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    font-family: inherit;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    touch-action: manipulation;

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

.rafi-reaction-button:hover {
    background: #f0f2f5;

    transform: scale(1.25);
}

.rafi-reaction-button:active {
    transform: scale(1.12);
}

.rafi-reaction-button.is-active {
    background: #e7f3ff;

    transform: scale(1.08);
}


/*
|--------------------------------------------------------------------------
| Reaction Button Loading
|--------------------------------------------------------------------------
*/

.rafi-reaction-button[data-loading="1"] {
    opacity: 0.55;

    cursor: wait;
}


/*
|--------------------------------------------------------------------------
| Comment / Share
|--------------------------------------------------------------------------
*/

.rafi-comment-action,
.rafi-share-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 7px 11px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #65676b;

    font-family: inherit;

    font-size: 14px;
    font-weight: 500;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.rafi-comment-action:hover,
.rafi-share-action:hover {
    background: #f0f2f5;
}


/*
|--------------------------------------------------------------------------
| Comment / Share Disabled
|--------------------------------------------------------------------------
*/

.rafi-comment-action:disabled,
.rafi-share-action:disabled {
    opacity: 0.55;

    cursor: not-allowed;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .rafi-post-composer {
        border-radius: 10px;
    }


    .rafi-post-composer-top {
        padding: 12px;
    }


    .rafi-post-composer-panel {
        padding: 14px;
    }


    .rafi-post-tools {
        gap: 4px;
    }


    .rafi-post-tool {
        padding: 8px;
    }


    .rafi-post-tool span:last-child {
        display: none;
    }


    .rafi-post-composer-bottom {
        align-items: stretch;

        flex-direction: column;
    }


    .rafi-post-visibility {
        justify-content: space-between;
    }


    .rafi-post-submit {
        width: 100%;
    }


    /*
    |--------------------------------------------------------------------------
    | Mobile Post Actions
    |--------------------------------------------------------------------------
    */

    .rafi-post-actions {
        gap: 4px;

        padding: 8px 6px;
    }


    .rafi-reaction-area {
        gap: 4px;
    }


    .rafi-reaction-summary {
        gap: 5px;
    }


    .rafi-reaction-count {
        font-size: 12px;
    }


    .rafi-main-reaction,
    .rafi-comment-action,
    .rafi-share-action {
        min-height: 34px;

        padding: 6px 7px;

        font-size: 13px;
    }


    .rafi-reaction-picker {
        left: 0;

        bottom: calc(100% + 6px);

        padding: 6px 8px;
    }


    .rafi-reaction-button {
        width: 34px;
        height: 34px;

        font-size: 20px;
    }

}


/*
|--------------------------------------------------------------------------
| Very Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {

    .rafi-post-actions {
        gap: 2px;
    }


    .rafi-reaction-summary {
        gap: 3px;
    }


    .rafi-reaction-count {
        font-size: 11px;
    }


    .rafi-main-reaction,
    .rafi-comment-action,
    .rafi-share-action {
        padding-left: 5px;
        padding-right: 5px;

        font-size: 12px;
    }

}
/*
 * ==========================================================
 * RaFi Community - Comment System
 * Comment UI v1.0
 * ==========================================================
 */


/*
|--------------------------------------------------------------------------
| Comments Section
|--------------------------------------------------------------------------
*/

.rafi-comments-section {
    width: 100%;

    margin-top: 0;

    padding: 14px 16px 16px;

    box-sizing: border-box;

    border-top: 1px solid #eeeeee;

    background: #ffffff;

    animation:
        rafiCommentsOpen
        0.18s ease-out;
}


.rafi-comments-section[hidden] {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| Open Animation
|--------------------------------------------------------------------------
*/

@keyframes rafiCommentsOpen {

    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/*
|--------------------------------------------------------------------------
| Comments Header
|--------------------------------------------------------------------------
*/

.rafi-comments-header {
    display: flex;
    align-items: center;

    margin-bottom: 12px;

    font-size: 15px;

    color: #1f2937;
}


.rafi-comments-header strong {
    font-size: 15px;

    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Comments List
|--------------------------------------------------------------------------
*/

.rafi-comments-list {
    display: flex;

    flex-direction: column;

    gap: 12px;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Single Comment
|--------------------------------------------------------------------------
*/

.rafi-comment-item {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Avatar
|--------------------------------------------------------------------------
*/

.rafi-comment-avatar-wrap {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;
}


.rafi-comment-avatar,
.rafi-comment-avatar-wrap img {
    display: block;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    object-fit: cover;
}


/*
|--------------------------------------------------------------------------
| Comment Body
|--------------------------------------------------------------------------
*/

.rafi-comment-body {
    min-width: 0;

    flex: 1;
}


/*
|--------------------------------------------------------------------------
| Comment Bubble
|--------------------------------------------------------------------------
*/

.rafi-comment-bubble {
    display: inline-block;

    max-width: 100%;

    padding: 8px 12px;

    box-sizing: border-box;

    background: #f0f2f5;

    border-radius: 14px;
}


/*
|--------------------------------------------------------------------------
| Comment Author
|--------------------------------------------------------------------------
*/

.rafi-comment-author {
    margin-bottom: 2px;

    color: #1c1e21;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| Comment Text
|--------------------------------------------------------------------------
*/

.rafi-comment-text {
    color: #303030;

    font-size: 14px;

    line-height: 1.5;

    word-wrap: break-word;

    overflow-wrap: anywhere;
}


.rafi-comment-text p {
    margin: 0;
}


.rafi-comment-text p + p {
    margin-top: 5px;
}


/*
|--------------------------------------------------------------------------
| Comment Meta
|--------------------------------------------------------------------------
*/

.rafi-comment-meta {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 3px;

    padding-left: 4px;

    color: #65676b;

    font-size: 11px;

    line-height: 1.3;
}


/*
|--------------------------------------------------------------------------
| Loading
|--------------------------------------------------------------------------
*/

.rafi-comments-loading {
    padding: 14px 5px;

    color: #65676b;

    font-size: 13px;

    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Empty Comments
|--------------------------------------------------------------------------
*/

.rafi-no-comments {
    padding: 15px 8px;

    color: #65676b;

    font-size: 13px;

    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Error
|--------------------------------------------------------------------------
*/

.rafi-comments-error {
    padding: 12px;

    color: #b91c1c;

    background: #fef2f2;

    border-radius: 8px;

    font-size: 13px;

    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Comment Form
|--------------------------------------------------------------------------
*/

.rafi-comment-form {
    margin-top: 14px;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Comment Input
|--------------------------------------------------------------------------
*/

.rafi-comment-input {
    display: block;

    width: 100%;

    min-height: 42px;

    max-height: 140px;

    padding: 10px 13px;

    box-sizing: border-box;

    border: 1px solid #d9dde3;

    border-radius: 12px;

    background: #f8f9fa;

    color: #1f2937;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.5;

    resize: vertical;

    outline: none;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}


.rafi-comment-input::placeholder {
    color: #9ca3af;
}


.rafi-comment-input:focus {
    background: #ffffff;

    border-color: #1877f2;

    box-shadow:
        0 0 0 2px rgba(
            24,
            119,
            242,
            0.08
        );
}


.rafi-comment-input:disabled {
    opacity: 0.65;

    cursor: wait;
}


/*
|--------------------------------------------------------------------------
| Comment Form Bottom
|--------------------------------------------------------------------------
*/

.rafi-comment-form-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 8px;
}


/*
|--------------------------------------------------------------------------
| Comment Hint
|--------------------------------------------------------------------------
*/

.rafi-comment-hint {
    color: #9ca3af;

    font-size: 11px;

    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| Submit Comment
|--------------------------------------------------------------------------
*/

.rafi-comment-submit {
    flex: 0 0 auto;

    min-height: 34px;

    padding: 7px 14px;

    border: 0;

    border-radius: 8px;

    background: #1877f2;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        opacity 0.15s ease,
        transform 0.12s ease;
}


.rafi-comment-submit:hover {
    background: #166fe5;
}


.rafi-comment-submit:active {
    transform: scale(0.97);
}


.rafi-comment-submit:disabled {
    opacity: 0.6;

    cursor: wait;
}


/*
|--------------------------------------------------------------------------
| Comment Button Active
|--------------------------------------------------------------------------
*/

.rafi-comment-action.is-active {
    background: #eef5ff;

    color: #1877f2;

    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .rafi-comments-section {
        padding: 12px 9px 14px;
    }


    .rafi-comments-header {
        margin-bottom: 10px;
    }


    .rafi-comments-list {
        gap: 10px;
    }


    .rafi-comment-item {
        gap: 7px;
    }


    .rafi-comment-avatar-wrap {
        flex-basis: 34px;

        width: 34px;
        height: 34px;
    }


    .rafi-comment-avatar,
    .rafi-comment-avatar-wrap img {
        width: 34px;
        height: 34px;
    }


    .rafi-comment-bubble {
        padding: 7px 10px;

        border-radius: 12px;
    }


    .rafi-comment-author {
        font-size: 12px;
    }


    .rafi-comment-text {
        font-size: 13px;
    }


    .rafi-comment-meta {
        font-size: 10px;
    }


    .rafi-comment-form {
        margin-top: 12px;
    }


    .rafi-comment-input {
        min-height: 40px;

        padding: 9px 11px;

        font-size: 13px;
    }


    .rafi-comment-form-bottom {
        align-items: flex-end;
    }


    .rafi-comment-hint {
        font-size: 10px;
    }


    .rafi-comment-submit {
        min-height: 33px;

        padding: 7px 11px;

        font-size: 12px;
    }

}


/*
|--------------------------------------------------------------------------
| Very Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {

    .rafi-comment-form-bottom {
        flex-direction: column;

        align-items: stretch;
    }


    .rafi-comment-submit {
        width: 100%;
    }


    .rafi-comment-hint {
        text-align: center;
    }

}
/* ==========================================================
   RaFi Community - Current PHP Markup Fix
   ========================================================== */

.rafi-posts-wrapper {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #1f2937;
}


/* ==========================================================
   Composer
   ========================================================== */

.rafi-post-composer {
    width: 100%;
    margin: 0 auto 22px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    overflow: hidden;
}

.rafi-post-composer-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    cursor: pointer;
}

.rafi-post-composer-trigger:hover {
    background: #f8fafc;
}

.rafi-post-composer-trigger img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.rafi-post-composer-input {
    flex: 1;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    background: #f5f6f7;
    color: #65676b;
    font-size: 14px;
}


/* ==========================================================
   Composer Panel
   ========================================================== */

.rafi-post-composer-panel {
    padding: 16px;
    border-top: 1px solid #eeeeee;
}

.rafi-post-composer-panel[hidden] {
    display: none !important;
}

.rafi-post-composer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rafi-post-composer-header strong {
    font-size: 18px;
    font-weight: 700;
}

#rafi-close-post-composer {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f1f3f5;
    color: #555;
    font-size: 22px;
    cursor: pointer;
}

#rafi-post-content {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    outline: none;
}

#rafi-post-content:focus {
    border-color: #1877f2;
}


/* ==========================================================
   Post Tools
   ========================================================== */

.rafi-post-tools {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eeeeee;
}

.rafi-post-tool {
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #555;
    font-size: 13px;
    cursor: pointer;
}

.rafi-post-tool:hover {
    background: #f1f3f5;
}


/* ==========================================================
   Post Footer
   ========================================================== */

.rafi-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.rafi-post-footer label {
    color: #6b7280;
    font-size: 13px;
}

#rafi-post-visibility {
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
}

.rafi-post-submit {
    min-width: 80px;
    padding: 9px 18px;
    border: 0;
    border-radius: 7px;
    background: #1877f2;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}


/* ==========================================================
   Community Feed
   ========================================================== */

.rafi-community-feed {
    width: 100%;
}

.rafi-community-feed > h2 {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}


/* ==========================================================
   Post Card
   ========================================================== */

.rafi-post-card {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: visible;
}

.rafi-post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.rafi-post-user-avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.rafi-post-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rafi-post-user-info strong {
    font-size: 14px;
    color: #111827;
}

.rafi-post-user-info span {
    font-size: 12px;
    color: #8a8f98;
}


/* ==========================================================
   Post Content
   ========================================================== */

.rafi-post-content {
    padding: 4px 14px 16px;
    min-height: 40px;
    font-size: 15px;
    line-height: 1.6;
    color: #1f2937;
}

.rafi-post-content p {
    margin: 0 0 8px;
}


/* ==========================================================
   Post Actions
   ========================================================== */

.rafi-post-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px 10px;
    border-top: 1px solid #eeeeee;
    background: #fff;
}


/* ==========================================================
   Reaction Summary
   ========================================================== */

.rafi-reaction-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

.rafi-reaction-count-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #65676b;
}


/* ==========================================================
   Reaction Wrapper
   ========================================================== */

.rafi-reaction-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.rafi-main-reaction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #65676b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.rafi-main-reaction:hover {
    background: #f0f2f5;
}

.rafi-main-reaction.is-reacted {
    color: #1877f2;
    font-weight: 600;
}


/* ==========================================================
   IMPORTANT
   Reaction Selector must be hidden
   ========================================================== */

/* ==========================================================
   RaFi Reaction Popup
   ========================================================== */

.rafi-reaction-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.rafi-reaction-selector {
    position: absolute;

    left: 0;
    bottom: 42px;

    display: none;
    align-items: center;
    gap: 3px;

    width: max-content;

    padding: 6px 8px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 30px;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);

    z-index: 99999;
}

.rafi-reaction-selector.is-open {
    display: flex !important;
}

.rafi-reaction-selector[hidden] {
    display: none !important;
}


/* Reaction buttons */

.rafi-reaction-selector .rafi-reaction-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition: transform 0.15s ease,
                background 0.15s ease;
}

.rafi-reaction-selector .rafi-reaction-button:hover {
    background: #f0f2f5;
    transform: scale(1.18);
}

.rafi-reaction-selector .rafi-reaction-button.is-active {
    background: #e7f3ff;
}


/* ==========================================================
   Reaction Buttons
   ========================================================== */

.rafi-reaction-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    font-size: 21px;
    line-height: 1;

    cursor: pointer;
}

.rafi-reaction-button:hover {
    background: #f0f2f5;
    transform: scale(1.15);
}

.rafi-reaction-button.is-active {
    background: #e7f3ff;
}


/* ==========================================================
   Comment / Share
   ========================================================== */

.rafi-comment-action,
.rafi-share-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 6px 10px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #65676b;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    cursor: pointer;
}

.rafi-comment-action:hover,
.rafi-share-action:hover {
    background: #f0f2f5;
}


/* ==========================================================
   Comments Section
   ========================================================== */

.rafi-comments-section {
    margin-top: 8px;
    padding: 12px 14px;
    border-top: 1px solid #eeeeee;
    background: #fafafa;
}

.rafi-no-comments {
    padding: 10px 0;
    color: #8a8f98;
    font-size: 13px;
}

.rafi-comment-item {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.rafi-comment-avatar-wrap img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.rafi-comment-body {
    flex: 1;
    min-width: 0;
}

.rafi-comment-bubble {
    display: inline-block;
    max-width: 100%;
    padding: 8px 11px;
    border-radius: 12px;
    background: #f0f2f5;
}

.rafi-comment-author {
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}

.rafi-comment-text {
    font-size: 13px;
    line-height: 1.45;
    color: #1f2937;
}

.rafi-comment-text p {
    margin: 0;
}

.rafi-comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    padding-left: 4px;
    font-size: 11px;
    color: #8a8f98;
}

.rafi-comment-meta button {
    border: 0;
    background: transparent;
    color: #65676b;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
}

.rafi-comment-meta button:hover {
    text-decoration: underline;
}


/* ==========================================================
   Nested Replies
   ========================================================== */

.rafi-comment-children {
    margin-left: 42px;
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid #e5e7eb;
}


/* ==========================================================
   Deleted Comment
   ========================================================== */

.rafi-comment-deleted {
    color: #8a8f98;
    font-style: italic;
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 600px) {

    .rafi-posts-wrapper {
        max-width: 100%;
    }

    .rafi-post-actions {
        gap: 3px;
    }

    .rafi-main-reaction,
    .rafi-comment-action,
    .rafi-share-action {
        padding: 6px 7px;
        font-size: 12px;
    }

    .rafi-reaction-button {
        width: 34px;
        height: 34px;
        font-size: 20px;
    }

    .rafi-comment-children {
        margin-left: 25px;
    }

}

/* ==========================================================
 * RaFi Comment Reactions
 * ========================================================== */
.rafi-comment-reactions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    margin-bottom: 2px;
}
.rafi-comment-reaction {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 26px;
    padding: 2px 6px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #65676b;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.rafi-comment-reaction:hover { background: #f0f2f5; }
.rafi-comment-reaction.is-active {
    background: #e7f3ff;
    color: #1877f2;
    transform: scale(1.03);
}
.rafi-comment-reaction[data-loading="1"] { opacity: .55; cursor: wait; }
.rafi-comment-reaction-count { font-size: 12px; font-weight: 600; }
/* Comment Header Count */
.rafi-comments-header .rafi-comment-count {
    margin-left: 5px;
    font-weight: 600;
    color: #6b7280;
}
/* Post Action Comment Count */
.rafi-comment-action .rafi-comment-count {
    margin-left: 5px;
    font-weight: 600;
}
/* ==========================================================
   Post Menu
========================================================== */

.rafi-post-header {
    position: relative;
}


.rafi-post-menu-button {
    position: absolute;
    top: 4px;
    right: 4px;

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #65676b;

    font-size: 24px;
    line-height: 30px;

    cursor: pointer;

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

    transition:
        background .15s ease,
        color .15s ease;
}


.rafi-post-menu-button:hover {
    background: #f0f2f5;
    color: #111827;
}


/* ==========================================================
   Menu Box
========================================================== */

.rafi-post-menu {
    position: absolute;

    top: 42px;
    right: 4px;

    z-index: 1000;

    min-width: 150px;

    padding: 6px;

    background: #ffffff;

    border: 1px solid #e4e6eb;

    border-radius: 10px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .12);

    display: none;
}


.rafi-post-menu.is-open {
    display: block;
}


/* ==========================================================
   Delete Button
========================================================== */

.rafi-post-delete {
    width: 100%;

    padding: 9px 12px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: #dc2626;

    text-align: left;

    font-size: 14px;

    cursor: pointer;
}


.rafi-post-delete:hover {
    background: #fff1f2;
}


.rafi-post-delete:disabled {
    opacity: .55;
    cursor: wait;
}
/* ==========================================================
   Edit Post
========================================================== */

.rafi-post-edit {
    width: 100%;
    padding: 9px 12px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: #111827;

    text-align: left;

    font-size: 14px;

    cursor: pointer;
}


.rafi-post-edit:hover {
    background: #f0f2f5;
}


/* ==========================================================
   Edit Form
========================================================== */

.rafi-post-edit-form {
    margin-bottom: 12px;
}


.rafi-post-edit-input {
    width: 100%;
    min-height: 110px;

    box-sizing: border-box;

    padding: 12px;

    border: 1px solid #d1d5db;
    border-radius: 10px;

    background: #ffffff;

    color: #111827;

    font-size: 15px;
    line-height: 1.5;

    resize: vertical;

    outline: none;
}


.rafi-post-edit-input:focus {
    border-color: #1877f2;
}


/* ==========================================================
   Edit Buttons
========================================================== */

.rafi-post-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 8px;
}


.rafi-post-edit-cancel,
.rafi-post-edit-save {
    border: 0;
    border-radius: 7px;

    padding: 7px 14px;

    font-size: 14px;

    cursor: pointer;
}


.rafi-post-edit-cancel {
    background: #f0f2f5;
    color: #111827;
}


.rafi-post-edit-save {
    background: #1877f2;
    color: #ffffff;
}


.rafi-post-edit-cancel:hover {
    background: #e4e6eb;
}


.rafi-post-edit-save:hover {
    opacity: .9;
}


.rafi-post-edit-save:disabled,
.rafi-post-edit-cancel:disabled {
    opacity: .55;
    cursor: wait;
}
/*
|--------------------------------------------------------------------------
| Share Popup
|--------------------------------------------------------------------------
*/

.rafi-share-popup {
    position: absolute;

    z-index: 999999;

    min-width: 190px;

    padding: 6px;

    background: #ffffff;

    border: 1px solid #e4e6eb;

    border-radius: 12px;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.16);
}


/*
|--------------------------------------------------------------------------
| Share Popup Inner
|--------------------------------------------------------------------------
*/

.rafi-share-popup-inner {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


/*
|--------------------------------------------------------------------------
| Share Title
|--------------------------------------------------------------------------
*/

.rafi-share-popup-title {
    padding: 8px 10px;

    color: #1c1e21;

    font-size: 14px;

    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| Share Option
|--------------------------------------------------------------------------
*/

.rafi-share-option {
    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 9px 10px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #1c1e21;

    font-family: inherit;

    font-size: 14px;

    text-align: left;

    cursor: pointer;
}


.rafi-share-option:hover {
    background: #f0f2f5;
}


/*
|--------------------------------------------------------------------------
| Share Option Icon
|--------------------------------------------------------------------------
*/

.rafi-share-option::first-letter {
    font-size: 17px;
}


/*
|--------------------------------------------------------------------------
| Share Close
|--------------------------------------------------------------------------
*/

.rafi-share-close {
    position: absolute;

    top: 4px;

    right: 4px;

    width: 26px;

    height: 26px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: #65676b;

    font-size: 20px;

    line-height: 26px;

    cursor: pointer;
}


.rafi-share-close:hover {
    background: #f0f2f5;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .rafi-share-popup {

        min-width: 175px;

        max-width: calc(100vw - 20px);

    }

}
.rafi-copy-option {
    justify-content: space-between;
}

.rafi-copy-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rafi-copy-button {
    padding: 4px 9px;

    border-radius: 6px;

    background: #e7f3ff;

    color: #1877f2;

    font-size: 12px;

    font-weight: 600;
}
.rafi-share-count {
    margin-left: 4px;
}
/*
|--------------------------------------------------------------------------
| Post Image
|--------------------------------------------------------------------------
*/

.rafi-post-media {
    margin-top: 14px;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}
/* ==========================================================
   RaFi Post Media Grid
   ========================================================== */

.rafi-post-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.rafi-post-media > img,
.rafi-post-media > video {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    margin: 0;
}

.rafi-post-media > video {
    background: #000;
}


/* One media only */
.rafi-post-media:has(> :only-child) {
    grid-template-columns: 1fr;
}

.rafi-post-media:has(> :only-child) > img,
.rafi-post-media:has(> :only-child) > video {
    height: auto;
    max-height: 600px;
    object-fit: contain;
}


/* Mobile */
@media (max-width: 600px) {

    .rafi-post-media {
        gap: 2px;
    }

    .rafi-post-media > img,
    .rafi-post-media > video {
        height: 220px;
    }

    .rafi-post-media:has(> :only-child) > img,
    .rafi-post-media:has(> :only-child) > video {
        height: auto;
        max-height: 500px;
    }

}
.rafi-post-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}
/* ==========================================================
   RaFi Poll Design
========================================================== */

.rafi-poll-card {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #e1e5ea;
    border-radius: 12px;
    background: #fff;
}

.rafi-poll-question {
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
}

.rafi-poll-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rafi-poll-card .rafi-poll-option,
.rafi-poll-vote-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    box-sizing: border-box;

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

    background: #f8f9fb;
    color: #111827;

    text-align: left;
    font-size: 15px;

    cursor: pointer;
    transition: all .2s ease;
}

.rafi-poll-card .rafi-poll-option:hover,
.rafi-poll-vote-option:hover {
    border-color: #0d6efd;
    background: #f1f6ff;
}

.rafi-poll-option-text {
    display: block;
    flex: 1 1 auto;

    text-align: left !important;

    font-weight: 500;
    color: #111827;
}

.rafi-poll-option-percent {
    display: block;
    flex: 0 0 auto;

    margin-left: auto;

    text-align: right !important;

    font-weight: 600;
    color: #6b7280;
}

.rafi-poll-total-votes {
    margin-top: 10px;
    font-size: 13px;
    color: #6b7280;
}

.rafi-poll-option.is-selected {
    border-color: #0d6efd;
    background: #f1f6ff;
    font-weight: 600;
}


/* ==========================================================
   Poll Option Content Alignment
========================================================== */

.rafi-poll-option-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-width: 0;
}

.rafi-poll-option-text {
    flex: 1 1 auto;

    text-align: left !important;

    font-weight: 500;
}

.rafi-poll-option-percent {
    flex: 0 0 auto;

    margin-left: auto;

    text-align: right !important;

    font-weight: 600;
    color: #6b7280;
}


/* ==========================================================
   RaFi Report Post Popup
========================================================== */

.rafi-report-popup {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

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

    padding: 20px !important;
    box-sizing: border-box !important;

    background: rgba(0, 0, 0, 0.55) !important;

    z-index: 999999 !important;
}


/* ==========================================================
   Report Popup Box
========================================================== */

.rafi-report-popup-inner {
    position: relative !important;

    width: 100% !important;
    max-width: 520px !important;

    max-height: calc(100vh - 40px) !important;

    overflow-y: auto !important;

    padding: 24px !important;
    box-sizing: border-box !important;

    background: #ffffff !important;

    border-radius: 14px !important;

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


/* ==========================================================
   Report Popup Title
========================================================== */

.rafi-report-popup-inner h3 {
    margin: 0 0 10px !important;

    font-size: 21px !important;
    line-height: 1.4 !important;

    color: #111827 !important;
}

.rafi-report-popup-inner p {
    margin: 0 0 18px !important;

    font-size: 15px !important;

    color: #6b7280 !important;
}


/* ==========================================================
   Report Options
========================================================== */

.rafi-report-popup-inner label {
    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    margin: 8px 0 !important;

    padding: 10px 12px !important;

    border: 1px solid #e1e5ea !important;

    border-radius: 8px !important;

    background: #f8f9fb !important;

    color: #111827 !important;

    font-size: 15px !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition: all .2s ease !important;
}

.rafi-report-popup-inner label:hover {
    border-color: #0d6efd !important;

    background: #f1f6ff !important;
}

.rafi-report-popup-inner input[type="radio"] {
    margin: 0 !important;

    width: 16px !important;
    height: 16px !important;

    flex: 0 0 auto !important;
}


/* ==========================================================
   Report Details
========================================================== */

.rafi-report-details {
    display: block !important;

    width: 100% !important;
    min-height: 90px !important;

    margin-top: 14px !important;

    padding: 10px 12px !important;

    box-sizing: border-box !important;

    border: 1px solid #d9dee5 !important;

    border-radius: 8px !important;

    background: #ffffff !important;

    color: #111827 !important;

    font-family: inherit !important;

    font-size: 14px !important;

    resize: vertical !important;

    outline: none !important;
}

.rafi-report-details:focus {
    border-color: #0d6efd !important;

    box-shadow:
        0 0 0 3px rgba(13, 110, 253, 0.10) !important;
}


/* ==========================================================
   Report Buttons
========================================================== */

.rafi-report-actions {
    display: flex !important;

    justify-content: flex-end !important;

    gap: 10px !important;

    margin-top: 18px !important;
}

.rafi-report-actions button {
    min-width: 90px !important;

    padding: 10px 16px !important;

    border-radius: 8px !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}

.rafi-report-cancel {
    border: 1px solid #d1d5db !important;

    background: #ffffff !important;

    color: #374151 !important;
}

.rafi-report-cancel:hover {
    background: #f3f4f6 !important;
}

.rafi-report-submit {
    border: 1px solid #0d6efd !important;

    background: #0d6efd !important;

    color: #ffffff !important;
}

.rafi-report-submit:hover {
    background: #0b5ed7 !important;
}

.rafi-report-submit:disabled {
    opacity: 0.65 !important;

    cursor: not-allowed !important;
}


/* ==========================================================
   Report Close Button
========================================================== */

.rafi-report-close {
    position: absolute !important;

    top: 10px !important;
    right: 10px !important;

    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 50% !important;

    background: #f3f4f6 !important;

    color: #374151 !important;

    font-size: 24px !important;

    line-height: 34px !important;

    text-align: center !important;

    cursor: pointer !important;
}

.rafi-report-close:hover {
    background: #e5e7eb !important;

    color: #111827 !important;
}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width: 600px) {

    .rafi-report-popup {
        padding: 12px !important;
    }

    .rafi-report-popup-inner {
        max-width: 100% !important;

        padding: 20px !important;

        border-radius: 12px !important;
    }

    .rafi-report-popup-inner h3 {
        font-size: 19px !important;
    }

    .rafi-report-actions {
        flex-direction: column-reverse !important;
    }

    .rafi-report-actions button {
        width: 100% !important;
    }
}
/* =========================================================
   RAFI MEMBER PROFILE
   Facebook Style Post Header
========================================================= */

.rafi-post-member-profile {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none !important;

    color: inherit;

    cursor: pointer;
}


.rafi-post-member-profile:hover {
    text-decoration: none !important;
}


/* Profile Picture */

.rafi-post-member-profile .rafi-post-user-avatar {
    width: 48px;

    height: 48px;

    min-width: 48px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;
}


.rafi-post-member-profile .rafi-post-user-avatar img {
    width: 48px !important;

    height: 48px !important;

    object-fit: cover;

    display: block;

    border-radius: 50%;
}


/* Name + Time */

.rafi-post-member-profile .rafi-post-user-info {
    display: flex;

    flex-direction: column;

    justify-content: center;
}


.rafi-post-member-profile .rafi-post-user-info strong {
    color: #17213d;

    font-size: 14px;

    font-weight: 700;

    line-height: 18px;
}


.rafi-post-member-profile .rafi-post-user-info span {
    color: #777;

    font-size: 11px;

    line-height: 15px;
}


/* Hover */

.rafi-post-member-profile:hover
.rafi-post-user-info strong {
    color: #1877f2;
}
/* =========================================================
   RaFi Community
   Sticky Header + Top Space Fix
   ========================================================= */

/* Keep RaFi header visible while scrolling */
.rafi-home-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}


/* Remove excessive space below the header */
.rafi-posts-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Community page content closer to header */
.rafi-posts-wrapper > *:first-child {
    margin-top: 0 !important;
}


/* Keep page content from hiding behind sticky header */
html {
    scroll-padding-top: 76px;
}


/* Back-to-top button */
.rafi-community-top-btn {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: 48px;
    height: 48px;

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

    border: 0;
    border-radius: 50%;

    background: #18285c;
    color: #ffffff;

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

    cursor: pointer;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);

    z-index: 10000;
}


/* Show button after scrolling */
.rafi-community-top-btn.is-visible {
    display: flex;
}


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

    .rafi-home-header {
        min-height: 64px !important;
        padding: 8px 12px !important;
    }

    html {
        scroll-padding-top: 64px;
    }

    .rafi-community-top-btn {
        right: 15px;
        bottom: 15px;

        width: 44px;
        height: 44px;

        font-size: 20px;
    }
}
/* ==========================================================
   RaFi Community - Back To Top Button
   ========================================================== */

.rafi-back-to-top {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: 48px;
    height: 48px;

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

    border: none;
    border-radius: 50%;

    background: #18285c;
    color: #ffffff;

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

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index: 10000;
}

.rafi-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rafi-back-to-top:hover {
    transform: translateY(-3px);
}


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

    .rafi-back-to-top {
        right: 15px;
        bottom: 15px;

        width: 44px;
        height: 44px;

        font-size: 21px;
    }

}
/* ==========================================================
   RaFi Community - My Posts Top Space
   ========================================================== */

body:has(.rafi-posts-wrapper) .rafi-posts-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body:has(.rafi-posts-wrapper) .rafi-posts-wrapper > * {
    margin-top: 0 !important;
}

body:has(.rafi-posts-wrapper) {
    padding-top: 0 !important;
}

@media (min-width: 769px) {
    body:has(.rafi-posts-wrapper) .rafi-posts-wrapper {
        transform: translateY(-60px);
    }
}
/* ==========================================================
   Logout Message
   Normal document flow
   ========================================================== */

.rafi-login-community-message {
    display: block !important;

    position: relative !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    margin: 0 0 24px 0 !important;

    padding: 0 !important;

    clear: both !important;

    float: none !important;

    transform: none !important;
}


/* ==========================================================
   Logout Message Title
   ========================================================== */

.rafi-login-community-message strong {
    display: block !important;

    margin: 0 0 6px 0 !important;

    line-height: 1.4 !important;
}


/* ==========================================================
   Logout Message Text
   ========================================================== */

.rafi-login-community-message p {
    display: block !important;

    margin: 0 !important;

    line-height: 1.5 !important;
}


/* ==========================================================
   Feed after Logout Message
   ========================================================== */

.rafi-login-community-message
+ .rafi-community-feed {
    display: block !important;

    position: relative !important;

    clear: both !important;

    margin-top: 0 !important;

    transform: none !important;
}
/* ==========================================================
   HOME PAGE
   Logout Community Message Position
   ========================================================== */

.rafi-home-real-feed {
    padding-top: 60px !important;
    box-sizing: border-box;
}

.rafi-home-real-feed .rafi-login-community-message {
    display: block !important;

    position: static !important;

    width: 100% !important;

    margin: 0 0 10px 0 !important;

    padding: 0 !important;

    clear: both !important;

    float: none !important;

    transform: none !important;
}

.rafi-home-real-feed .rafi-login-community-message strong {
    display: block !important;

    margin: 0 0 6px 0 !important;
}

.rafi-home-real-feed .rafi-login-community-message p {
    display: block !important;

    margin: 0 !important;
}
/* ==========================================================
   RaFi Feed Controls
========================================================== */

.rafi-feed-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 6px;
    background: #f5f7fb;
    border: 1px solid #e2e7f0;
    border-radius: 14px;
}


.rafi-feed-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;

    color: #5d6878;
    text-decoration: none;
    font-weight: 600;

    border-radius: 10px;

    transition:
        background .2s ease,
        color .2s ease;
}


.rafi-feed-control:hover {
    background: #ffffff;
    color: #2f6fc8;
}


.rafi-feed-control.is-active {
    background: #2f6fc8;
    color: #ffffff;

    box-shadow:
        0 4px 12px
        rgba(
            47,
            111,
            200,
            .20
        );
}


@media (
    max-width: 600px
) {

    .rafi-feed-controls {
        gap: 5px;
    }


    .rafi-feed-control {
        flex: 1 1 0;
        padding: 0 8px;
        font-size: 13px;
    }
}
.rafi-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 24px 0 35px;
}

.rafi-load-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 12px 24px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #dcdfe4;
    color: #222;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.rafi-load-more-button:hover {
    background: #f5f6f7;
    border-color: #c7cbd1;
}

/* ==========================================================
   RaFi Photo Multi Preview - Maximum 4
   ========================================================== */

#rafi-post-form #rafi-post-preview.rafi-post-preview {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 0;
    margin: 12px 0 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

#rafi-post-form #rafi-post-preview:empty {
    display: none;
}

#rafi-post-form .rafi-photo-preview-item {
    flex: 0 0 140px;
    width: 140px;
    min-width: 140px;
    margin: 0;
}

#rafi-post-form .rafi-photo-preview-image-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: 12px;
    background: #eef2f6;
}

#rafi-post-form .rafi-photo-preview-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#rafi-post-form .rafi-photo-preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 28, 38, .88);
    color: #fff;
    font-size: 26px;
    line-height: 28px;
    cursor: pointer;
}

#rafi-post-form .rafi-photo-upload-status {
    margin-top: 7px;
    min-height: 20px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    color: #556070;
}

#rafi-post-form .rafi-photo-upload-status.is-complete {
    color: #198754;
}

#rafi-post-form .rafi-photo-upload-status.is-failed {
    color: #c62828;
}

/* 1 image normal. 2-4 images compact 2x2 grid. */
.rafi-post-media.rafi-post-media-count-1 {
    display: block;
}

.rafi-post-media.rafi-post-media-count-1 > .rafi-post-image {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
}

.rafi-post-media.rafi-post-media-count-2,
.rafi-post-media.rafi-post-media-count-3,
.rafi-post-media.rafi-post-media-count-4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
}

.rafi-post-media.rafi-post-media-count-2 > .rafi-post-image,
.rafi-post-media.rafi-post-media-count-3 > .rafi-post-image,
.rafi-post-media.rafi-post-media-count-4 > .rafi-post-image {
    width: 100%;
    height: 280px;
    min-height: 0;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    cursor: pointer;
}

.rafi-post-image[data-rafi-lightbox] {
    cursor: pointer;
}

/* Site lightbox, raw image never opens in a new tab. */
.rafi-post-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .88);
}

.rafi-post-lightbox[hidden] {
    display: none;
}

.rafi-post-lightbox img {
    display: block;
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.rafi-post-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 30px;
    line-height: 42px;
    cursor: pointer;
}

@media (max-width: 600px) {
    #rafi-post-form .rafi-photo-preview-item {
        flex-basis: 110px;
        width: 110px;
        min-width: 110px;
    }

    #rafi-post-form .rafi-photo-preview-image-wrap {
        width: 110px;
        height: 110px;
    }

    .rafi-post-media.rafi-post-media-count-2 > .rafi-post-image,
    .rafi-post-media.rafi-post-media-count-3 > .rafi-post-image,
    .rafi-post-media.rafi-post-media-count-4 > .rafi-post-image {
        height: 180px;
    }
}


/* ==========================================================
   RaFi Multi Photo Feed - Final Compact Grid Override
   ========================================================== */
.rafi-post-media.rafi-post-media-count-2,
.rafi-post-media.rafi-post-media-count-3,
.rafi-post-media.rafi-post-media-count-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 260px !important;
    gap: 3px !important;
    width: 100% !important;
    max-height: 523px !important;
    overflow: hidden !important;
}
.rafi-post-media.rafi-post-media-count-2 > .rafi-post-image,
.rafi-post-media.rafi-post-media-count-3 > .rafi-post-image,
.rafi-post-media.rafi-post-media-count-4 > .rafi-post-image {
    display: block !important;
    width: 100% !important;
    height: 260px !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    cursor: pointer !important;
}
.rafi-post-media.rafi-post-media-count-1 {
    display: block !important;
}
.rafi-post-media.rafi-post-media-count-1 > .rafi-post-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 480px !important;
    object-fit: contain !important;
}
@media (max-width: 600px) {
    .rafi-post-media.rafi-post-media-count-2,
    .rafi-post-media.rafi-post-media-count-3,
    .rafi-post-media.rafi-post-media-count-4 {
        grid-auto-rows: 180px !important;
        max-height: 363px !important;
    }
    .rafi-post-media.rafi-post-media-count-2 > .rafi-post-image,
    .rafi-post-media.rafi-post-media-count-3 > .rafi-post-image,
    .rafi-post-media.rafi-post-media-count-4 > .rafi-post-image {
        height: 180px !important;
    }
}

/* ==========================================================
   Reaction Popup Size & Position Fix
   Final override
   ========================================================== */
.rafi-reaction-wrap {
    position: relative;
}

.rafi-reaction-selector {
    left: 50% !important;
    right: auto !important;
    bottom: 52px !important;
    transform: translateX(-50%) !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    border-radius: 34px !important;
}

.rafi-reaction-selector .rafi-reaction-button,
.rafi-reaction-button {
    width: 46px !important;
    height: 46px !important;
    font-size: 28px !important;
    line-height: 1 !important;
}

@media (max-width: 600px) {
    .rafi-reaction-selector {
        bottom: 50px !important;
        gap: 5px !important;
        padding: 7px 10px !important;
    }

    .rafi-reaction-selector .rafi-reaction-button,
    .rafi-reaction-button {
        width: 42px !important;
        height: 42px !important;
        font-size: 25px !important;
    }
}


/*
|--------------------------------------------------------------------------
| Automatic Link Preview
|--------------------------------------------------------------------------
*/

.rafi-link-preview {
    box-sizing: border-box;
    width: 100%;
    margin: 14px 0;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    background: #ffffff;
}

.rafi-youtube-preview {
    display: block;
}

.rafi-video-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #111827;
}

.rafi-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.rafi-link-preview-source {
    display: block;
    padding: 11px 14px;
    color: #1f2937;
    font-weight: 700;
    text-decoration: none;
}

.rafi-link-preview-source:hover {
    background: #f8fafc;
}

/* Facebook fallback preview card. No Facebook iframe is used, so unavailable/private posts never show a large embed error. */
.rafi-facebook-preview {
    display: block;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
}

.rafi-facebook-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
}

.rafi-facebook-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: #1877f2;
    color: #ffffff;
    font-size: 34px;
    font-weight: 800;
    font-family: Arial, sans-serif;
}

.rafi-facebook-copy {
    min-width: 0;
}

.rafi-facebook-copy strong,
.rafi-facebook-copy small {
    display: block;
}

.rafi-facebook-copy strong {
    font-size: 18px;
    color: #1f2937;
}

.rafi-facebook-copy small {
    margin-top: 4px;
    color: #64748b;
}

.rafi-facebook-button {
    display: block;
    padding: 13px 18px;
    background: #1877f2;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.rafi-facebook-button:hover {
    background: #166fe5;
    color: #ffffff;
}

.rafi-post-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
    word-break: break-word;
}

@media (max-width: 600px) {
    .rafi-link-preview {
        border-radius: 12px;
    }

    .rafi-facebook-preview {
        padding: 12px;
    }
}

/* General Website Link Preview */
.rafi-website-preview{display:block!important;text-decoration:none!important;color:inherit!important;border:1px solid #dfe3e8;border-radius:12px;overflow:hidden;background:#fff;margin:10px 0;max-width:100%;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.rafi-website-preview-image{width:100%;max-height:320px;overflow:hidden;background:#f3f5f7}.rafi-website-preview-image img{width:100%;height:100%;max-height:320px;object-fit:cover;display:block}
.rafi-website-preview-body{padding:13px 15px}.rafi-website-preview-body small{display:block;color:#667085;margin-bottom:5px;font-size:12px}.rafi-website-preview-body strong{display:block;color:#182230;font-size:17px;line-height:1.35;margin-bottom:6px}.rafi-website-preview-body p{margin:0 0 10px;color:#667085;font-size:14px;line-height:1.45}.rafi-website-preview-body span{display:inline-block;font-size:14px;font-weight:600;color:#1877f2}


/* ==========================================================
   RaFi Text-only Post: Compact Card + Background Colors
   ========================================================== */

.rafi-post-card.rafi-text-only-post .rafi-post-content {
    display: block !important;
    min-height: 92px !important;
    padding: 22px 20px 28px !important;
    background: var(--rafi-post-text-bg, #ffffff);
    border-radius: 0;
    text-align: left !important;
    box-sizing: border-box;
    white-space: normal;
}

.rafi-post-card.rafi-text-only-post .rafi-post-content p {
    margin: 0 0 8px !important;
    text-align: inherit !important;
}

.rafi-post-card.rafi-text-only-post .rafi-post-content p:last-child {
    margin-bottom: 0 !important;
}

/* Keep uploaded post pictures exactly as wide as the feed/card. */
.rafi-post-media.rafi-post-media-count-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.rafi-post-media.rafi-post-media-count-1 > .rafi-post-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.rafi-post-background-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0 2px;
}

.rafi-post-background-label {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.rafi-post-background-options {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.rafi-post-bg-option {
    position: relative;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--rafi-bg-option, #ffffff);
    box-shadow: 0 0 0 1px #d1d5db;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.rafi-post-bg-option:first-child {
    background: #ffffff;
}

.rafi-post-bg-option:hover {
    transform: scale(1.08);
}

.rafi-post-bg-option.is-selected {
    box-shadow: 0 0 0 2px #1877f2;
    transform: scale(1.08);
}

.rafi-post-bg-option.is-selected::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 600px) {
    .rafi-post-background-picker {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

@media (max-width: 600px) {
    .rafi-post-media.rafi-post-media-count-1 > .rafi-post-image {
        max-height: 360px !important;
        object-fit: contain !important;
    }
}
/* Single Image - Full Feed Width */
.rafi-post-media.rafi-post-media-count-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

.rafi-post-media.rafi-post-media-count-1 > .rafi-post-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    margin: 0 !important;
}
/* Video Trim Action Buttons */
.rafi-video-trim-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.rafi-video-trim-preview-btn,
.rafi-video-trim-apply {
    border: 0;
    border-radius: 7px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.rafi-video-trim-preview-btn {
    background: #2563eb;
    color: #ffffff;
}

.rafi-video-trim-apply {
    background: #16a34a;
    color: #ffffff;
}

.rafi-video-trim-preview-btn:hover,
.rafi-video-trim-apply:hover {
    opacity: 0.88;
}

.rafi-video-trim-preview-btn:active,
.rafi-video-trim-apply:active {
    transform: translateY(1px);
}

@media (max-width: 600px) {
    .rafi-video-trim-actions {
        gap: 8px;
    }

    .rafi-video-trim-preview-btn,
    .rafi-video-trim-apply {
        padding: 8px 12px;
    }
}

/* ==========================================================
   RaFi Feed - 3 Line Post Preview / See More
   ========================================================== */
.rafi-post-content-collapsible {
    --rafi-post-collapsed-lines: 3;
    position: relative;
    line-height: 1.6 !important;
    max-height: calc(1.6em * var(--rafi-post-collapsed-lines)) !important;
    overflow: hidden !important;
}

.rafi-post-content-collapsible.is-expanded {
    max-height: none !important;
    overflow: visible !important;
}

.rafi-post-see-more {
    display: inline-block;
    margin: 4px 20px 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #1877f2 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.rafi-post-see-more:hover {
    text-decoration: underline !important;
}

.rafi-post-see-more[hidden] {
    display: none !important;
}

/* ==========================================================
   RaFi Feed - Single Image Holder
   Full image, centered, no crop.
   Multi-image grid remains unchanged.
   ========================================================== */
.rafi-post-media.rafi-post-media-count-1 {
    width: 100% !important;
    max-width: 100% !important;
    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f5f6f7 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

.rafi-post-media.rafi-post-media-count-1 > .rafi-post-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
}

@media (max-width: 768px) {
    .rafi-post-media.rafi-post-media-count-1 {
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;
    }
}
/* ==========================================================
   RaFi Bhai - Single Image Natural Ratio
   Full Width | Natural Height | No Crop | No Empty Space
   ========================================================== */

.rafi-post-media.rafi-post-media-count-1 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: block !important;

    overflow: visible !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    aspect-ratio: auto !important;
}

.rafi-post-media.rafi-post-media-count-1 > .rafi-post-image {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: fill !important;
    object-position: center center !important;

    aspect-ratio: auto !important;
}


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

    .rafi-post-media.rafi-post-media-count-1 {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        display: block !important;

        overflow: visible !important;

        margin: 0 !important;
        padding: 0 !important;

        aspect-ratio: auto !important;
    }

    .rafi-post-media.rafi-post-media-count-1 > .rafi-post-image {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: 100% !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: fill !important;
        object-position: center center !important;

        aspect-ratio: auto !important;
    }
}

/* ==========================================================
   RaFi Feed - Link Preview Outside 3-Line Text Collapse
   ========================================================== */
.rafi-post-link-previews {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.rafi-post-link-previews .rafi-link-preview {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================
   RaFi Feed - Empty Post Content: No Reserved Blank Space
   The link/article preview, image or video should start
   immediately when there is no actual post text.
   ========================================================== */
.rafi-post-content-collapsible.rafi-post-content-empty {
    display: block !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
    border: 0 !important;
}

.rafi-post-content-collapsible.rafi-post-content-empty + .rafi-post-see-more {
    display: none !important;
}


/* ==========================================================
   RaFi Feed - FINAL EMPTY POST COLLAPSE OVERRIDE
   Higher specificity is required because text-only post
   styling has its own min-height/padding rules.
   ========================================================== */
.rafi-post-card.rafi-text-only-post .rafi-post-content.rafi-post-content-empty,
.rafi-post-card .rafi-post-content.rafi-post-content-empty {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* The See More button must also disappear for an empty post. */
.rafi-post-card .rafi-post-content.rafi-post-content-empty + .rafi-post-see-more,
.rafi-post-card .rafi-post-content.rafi-post-content-empty ~ .rafi-post-see-more {
    display: none !important;
}