/* New Feeds for TikTok - Frontend Styles */

.tiktok-embed-wrapper {
    margin: 1.5em 0;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Responsive Container */
.tiktok-embed-wrapper.tiktok-responsive {
    width: 100%;
    max-width: 100%;
}

.tiktok-embed-wrapper.tiktok-responsive .tiktok-embed {
    width: 100%;
    max-width: 100%;
}

/* TikTok Embed Blockquote */
.tiktok-embed {
    position: relative;
    width: 325px;
    min-width: 325px;
    max-width: 100%;
    margin: 0 auto;
}

/* Feed Wrapper Specific Styles */
.tiktok-feed-wrapper {
    /* Additional styles for feeds if needed */
}

/* Center Alignment */
.tiktok-embed-wrapper.tiktok-center {
    margin-left: auto;
    margin-right: auto;
}

/* Custom Width Constraints */
.tiktok-embed-wrapper.tiktok-max-width-325 {
    max-width: 325px;
}

.tiktok-embed-wrapper.tiktok-max-width-400 {
    max-width: 400px;
}

.tiktok-embed-wrapper.tiktok-max-width-500 {
    max-width: 500px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tiktok-embed-wrapper {
        margin: 1em 0;
    }
    
    .tiktok-embed {
        min-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .tiktok-embed-wrapper {
        margin: 0.5em 0;
    }
}

/* Loading State */
.tiktok-embed-wrapper.loading {
    background: #f0f0f0;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.tiktok-embed-wrapper.loading::before {
    content: "Loading TikTok...";
    color: #666;
    font-size: 14px;
}

/* Ensure TikTok's embed script styles are applied */
.tiktok-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}