/* Custom CSS for Flexocial */

/* Loading spinner animation for form fields */
.is-loading {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236c757d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 40px;
    animation: spinner-rotate 1s linear infinite;
}

@keyframes spinner-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Form validation styling */
.form-control.is-valid {
    border-color: #28a745;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2328a745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23dc3545" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Ensure interaction counts match feed and profile posts */
.interaction-btn .red-count,
.interaction-btn .green-count,
.interaction-btn .support-count,
.interaction-btn .comments-count,
.comments-count,
.comment-count {
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Remove box from three-dot ellipsis dropdown toggles */
.action-menu-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Ensure icon remains clickable */
.action-menu-btn i {
    pointer-events: all;
}

/* Hide user handle in comments */
.comment-username {
    display: none !important;
}

/* Comment timestamp styling */
.comment-timestamp {
    font-size: 0.75rem !important;
    color: #6c757d !important;
}

/* Mobile comment layout fix */
@media (max-width: 575.98px) {
    .comment-content .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .comment-content .delete-comment-btn {
        margin-top: 4px !important;
    }
}

/* Likes modal user list styling */
#likesModal .user-list-item {
    display: flex;
    align-items: center;
    padding: .5rem;
}
#likesModal .user-profile-pic {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: .75rem;
    flex-shrink: 0;
}
#likesModal .user-list-info {
    flex-grow: 1;
}
#likesModal .user-list-name {
    font-weight: 600;
}
#likesModal .user-list-username {
    color: #6c757d;
    font-size: .9rem;
}
#likesModal .user-list-empty {
    text-align: center;
    color: #6c757d;
}
/* Smaller avatars on extra-small screens */
@media (max-width: 575.98px) {
    #likesModal .user-profile-pic {
        width: 32px;
        height: 32px;
    }
}

/* Prevent layout shift when modals open */
body.modal-open {
    padding-right: 0 !important;
    overflow-y: scroll !important;
}

/* Flush header to full width */
.main-header .header-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Flush mobile header edges */
.mobile-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}