/* =========================
   Tokens / base
   ========================= */
.tkf {
    --tkf-gap: 5px;
    --tkf-radius: 6px;
    --tkf-text: #0c0c0c;
    --tkf-muted: #666;
    --tkf-border: #ccc;
    --tkf-bg: #fff;
    --tkf-overlay: rgba(255,255,255,.5);
    --tkf-brand: #518acb;
    font: inherit;
    color: var(--tkf-text);
}

/* container shell (kept for other views too) */
.tkf_container {
    margin: 20px auto;
    position: relative;
}

.tkf-background {
    position: relative;
    width: 100%;
    background: transparent;
}

.tkf_header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.tkf_header img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-right: 10px;
}

.tkf_follow_button {
    flex-grow: 1;
}

/* =========================
   Thumbnails grid
   ========================= */
.tkf--standard.tkf--thumbnails {
    /* width cap comes from inline style: max-width + --tkf-cols/--tkf-thumb-w */
    margin: 0 auto;
}

/* reset UA margins that inflate tile height */
.tkf .tkf-grid { margin: 0; }
.tkf .tkf-card__media {
    position: relative;
    margin: 0;
}       /* <figure> */
.tkf .tkf-card__info {
    margin: 0;
    position: relative;
    border: 1px solid #cccccc;
    border-top: 0;
}

.tkf--standard{
    --_w: var(--tkf-thumb-w, 300px);
    --_h: var(--tkf-thumb-h, 300px);
    --_gap: var(--tkf-gap, 5px);
    --_colsMax: var(--tkf-cols, 3);
    text-align: center;            /* centers the inline-grid below */
}

.tkf--standard .tkf-grid{
    display: inline-grid;          /* key: width = content-based */
    grid-template-columns: repeat(auto-fit, minmax(0, var(--_w)));
    gap: var(--_gap);
    /* HARD CAP for a row = max columns */
    max-width: calc(
            (var(--_colsMax) * var(--_w)) + ((var(--_colsMax) - 1) * var(--_gap))
    );
    padding-inline: var(--_pad);
    margin: 0;
    list-style: none;
    justify-content: center;
}

/* Card */
.tkf-card {
    display: block;
    width: var(--_w);
    position: relative;
    overflow: hidden;
}

.tkf-card__action {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

button.tkf-card__action,
button.tkf-card__action:hover {
    background: #ffffff;
}

.tkf-card__media{
    width: var(--_w);
    height: var(--_h);
    aspect-ratio: calc(1 / var(--tkf-ratio, 1)); /* 1 => square */
    border: 1px solid var(--tkf-border, #ccc);
    border-radius: 3px;
    overflow: hidden;
    box-sizing: border-box;  /* border included in the 350px */
}
.tkf-thumb-img{
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
    will-change: transform;
}

.tkf-card:hover .tkf-thumb-img,
.tkf-card__action:focus-visible .tkf-thumb-img{
    transform: scale(1.03);
}

.tkf-card__media { transition: box-shadow .25s ease; }
.tkf-card:hover .tkf-card__media { box-shadow: 0 6px 18px rgba(0,0,0,.12); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tkf-thumb-img,
    .tkf-card__media { transition: none; }
}

/* Badges (play/logo) – supply your own background images */
.tkf-card__badge {
    position: absolute;
    z-index: 2;
    width: 21px;
    height: 21px;
    background-size: contain;
    background-repeat: no-repeat;
}

.tkf-card__badge.tkf-card__badge--play {
    width: 25px;
    height: 25px;
}

.tkf-card__badge--logo {
    top: 8px;
    right: 8px;
    background: url(../images/icons/tiktok_logo.png) no-repeat center / 17px;
}

.tkf-card__badge--play {
    top: calc(50% - 13px);
    right: calc(50% - 13px);
    background: url("../images/icons/play-icon.svg") no-repeat left center / 26px;
}

.tkf_default .tkf-card__badge--play {
    display: none;
}


/* Info strip */
.tkf-card__info {
    width: 100%;
    display: inline-block;
    padding: 6px 15px;
}
.tkf-info__avatar {
    display: inline-block;
    float: left;
    width: 50px;
    margin-top: -26px;
}
.tkf-info__avatar img {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    border: 2px solid #ffffff;
    display: block;
}
.tkf-info__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: calc(100% - 55px);
    justify-content: left;
    align-items: baseline;
    margin-bottom: 10px;
    color:#000000;
    text-align: left;
}
.tkf-info__title {
    font-weight: 600; font-size: 13px; line-height: 1.3; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkf-info__desc {
    font-size: 12px; color: var(--tkf-muted); line-height: 1.3;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tkf-info__metrics {
    width: 100%;
    margin-left: auto;
    display: inline-flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.tkf-meta {
    font-size: 12px;
    color: #444;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    width: auto;
    height: 15px;
    padding-left: 17px;
}

.tkf-meta--views {
    background: url(../images/icons/view.png) left center no-repeat;
    background-size: 13px;
}
.tkf-meta--likes {
    background: url(../images/icons/like.png) left center no-repeat;
    background-size: 13px;
}
.tkf-meta--comments {
    background: url(../images/icons/comment.png) left center no-repeat;
    background-size: 13px;
}
.tkf-meta--shares {
    background: url(../images/icons/share.png) left center no-repeat;
    background-size: 13px;
}
.tkf-meta--duration {
    background: url(../images/icons/duration.png) left center no-repeat;
    background-size: 13px;
}

/* “Default” view count overlay variant */
.tkf_default .tkf-card__info {
    position: absolute;
    bottom: 6px; left: 6px; right: 6px;
    background: transparent;
    border-radius: 4px;
    padding: 6px 8px;
    border:none;
    z-index: 2;
}
.tkf_default .tkf-meta--views {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    padding-left: 26px;
    background: url("../images/icons/play-icon.svg") no-repeat left center / 18px;
}

.tkf_default .tkf-grid-default-metrics-layer {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1;
}

.tkf_default .tkf-grid-default-metrics {
    display: none;
    justify-content: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    z-index: 2;
    width: 100%;
}

.tkf_default .tkf-grid-default-metrics.tkf-metrics-vertical {
    position: absolute;
    bottom: 18px;
    right: 12px;
    z-index: 2;
    top: unset;
    left: unset;
    transform:unset;
    width: auto;
}

.tkf_default .tkf-grid-default-metrics.tkf-metrics-vertical .tkf-info__metrics {
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    width: auto;

}

.tkf_default .tkf-item:hover .tkf-grid-default-metrics-layer {
    display: block;
}
.tkf_default .tkf-item:hover .tkf-grid-default-metrics {
    display: flex;
}

.tkf_default .tkf-grid-default-metrics .tkf-info__metrics {
    width: auto;
    margin: auto;
    justify-content: center;
}

.tkf_default .tkf-grid-default-metrics.tkf-metrics-vertical .tkf-info__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
}

.tkf_default .tkf-grid-default-metrics .tkf-meta {
    width: auto;
    height: 16px;
    background-size: 16px !important;
    color: #ffffff;
    padding-left: 22px;
    font-size: 15px;
}

.tkf_default .tkf-grid-default-metrics .tkf-meta.tkf-meta--comments {
    background: url(../images/icons/comment_icon_white.svg) center left no-repeat
}

.tkf_default .tkf-grid-default-metrics .tkf-meta.tkf-meta--likes {
    background: url(../images/icons/like_icon_white.svg) center left no-repeat
}

.tkf_default .tkf-grid-default-metrics .tkf-meta.tkf-meta--shares {
    background: url(../images/icons/share_icon_white.svg) center left no-repeat
}

/* Loading overlay (kept) */
.tkf_ajax_loading {
    position: absolute; inset: 0;
    opacity: .9; z-index: 999;
    background: url(../images/loading.gif) no-repeat center #ccc;
    background-size: 30px;
}

/* Pagination (new markup uses <nav><ul><button>) */
.tkf-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.tkf_container .tkf-pagination ul.tkf-page-list {display:flex;gap:6px;list-style:none;margin:10px 0 0;padding:0}
.tkf_container .tkf-pagination ul.tkf-page-list li.tkf-page-item {list-style:none;margin:0;padding:0}
.tkf-page-item .tkf-page-link,
.tkf-page-item span.tkf-page-link {display:inline-block;padding:6px 10px;border:1px solid #ddd;border-radius:6px;text-decoration:none}
.tkf-page-item.is-active .tkf-page-link {background:#111;color:#fff;border-color:#111}
.tkf-page-item.is-disabled .tkf-page-link {opacity:.5;cursor:not-allowed}
.tkf-page-item.is-ellipsis .tkf-ellipsis {display:inline-block;padding:6px 8px;color:#666}
.tkf-pagination[data-mode="infinite"] .tkf-sentinel {
    display:block; width:100%; height:1px;
}

/* hide helper */
.tkf-hidden { display: none !important; }

/* loader container */
.tkf_ajax_loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px auto 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f7f7f7;
    color: #333;
    font-size: 14px;
}

/* spinner circle */
.tkf-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-right-color: currentColor;
    border-radius: 50%;
    animation: tkf-spin 0.6s linear infinite;
}

/* status line under the feed */
.tkf-infinite-status{
    display:flex; justify-content:center; align-items:center;
    gap:10px; margin:16px 0 8px;
    color:#444; font-size:14px;
}

/* hide when not loading */
.tkf-infinite-status.is-hidden{ display:none; }

@keyframes tkf-spin {
    to { transform: rotate(360deg); }
}
/* End of pagination styles */

/* Modern overlay variants (kept but fixed rgba) */
.tkf_modern .tkf-card__info,
.tkf_modern_on_hover .tkf-card__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .5);
    border: 0;
    border-radius: 0;
    padding: 8px 15px;
}
.tkf_modern_on_hover .tkf-card__info { display: none; }
.tkf_modern_on_hover .tkf-card:hover .tkf-card__info { display: inline-block; }

/* Responsive collapse */
@media (max-width: 640px){
    .tkf--standard { --tkf-cols: 2; max-width: 100%; }
}

/* Utility */
.tkf-hidden { visibility: hidden; }
.tkf-border-box, .tkf-border-box * { box-sizing: border-box; }

/* =========================
   Blog view (image left, text right)
   ========================= */
.tkf--standard.tkf--blog {
    margin: 0 auto;
    /* expects inline vars:
       --tkf-row-gap, --tkf-col-gap, --tkf-media-w, --tkf-media-h, --tkf-media-ratio
    */
}

.tkf--blog .tkf-list {
    display: grid;
    row-gap: var(--tkf-row-gap, 16px);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Row layout */
.tkf--blog .tkf-row {
    display: grid;
    grid-template-columns: minmax(160px, var(--tkf-media-w, 320px)) 1fr;
    column-gap: var(--tkf-col-gap, 16px);
    align-items: start;
    border: 1px solid var(--tkf-border);
    border-radius: var(--tkf-radius);
    padding: 12px;
    background: var(--tkf-bg);
}

/* Media (left) */
.tkf--blog .tkf-media {
    position: relative;
    width: 100%;
    max-width: var(--tkf-media-w, 320px);
    height: var(--tkf-media-h, 180px);
    aspect-ratio: calc(1 / var(--tkf-media-ratio, 0.5625)); /* fallback ~16:9 */
    border: 1px solid var(--tkf-border);
    border-radius: 8px;
    overflow: hidden;
    background: #f6f6f6;
    box-sizing: border-box;
}
.tkf--blog .tkf-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
    will-change: transform;

}

.tkf--blog .tkf-row .tkf-media:hover img {
    transform: scale(1.03);
}

/* Reuse your action reset */
.tkf--blog .tkf-card__action {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Badges (aliases to your existing system) */
.tkf--blog .tkf-badge--logo,
.tkf--blog .tkf-badge--play {
    position: absolute;
    z-index: 2;
    width: 24px;
    height: 24px;
    opacity: .9;
    background-size: contain;
    background-repeat: no-repeat;
}
.tkf--blog .tkf-badge--logo { bottom: 8px; right: 8px; }
.tkf--blog .tkf-badge--play {
    bottom: 10px;
    left: 10px;
    background: url("../images/icons/play-icon.svg") no-repeat left center / 24px;
}

.tkf--blog .tkf-meta--views {
    position: absolute;
    bottom: 10px;
    left: 25px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    background: none;
    height: 24px;
}

/* Body (right) */
.tkf--blog .tkf-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
    min-width: 0; /* allow text truncation */
    align-items: flex-start;
}

.tkf--blog .tkf-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tkf--blog .tkf-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.tkf--blog .tkf-user {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    font-size: 13px;
}
.tkf--blog .tkf-user strong { font-weight: 600; }
.tkf--blog .tkf-user .tkf-username { color: var(--tkf-muted); }

.tkf--blog .tkf-title {
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    word-break: break-word;
}
.tkf--blog .tkf-desc {
    color: var(--tkf-muted);
    margin: 0;
    word-break: break-word;
    flex-grow: 1;
}

/* Metrics (reuses your .tkf-meta & icon classes) */
.tkf--blog .tkf-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--tkf-muted);
}

.tkf--blog .tkf-metrics .tkf-meta {
    font-size: 17px;
    background-size: 17px;
    padding-left: 25px;
    height: 25px;
    margin-right: 20px;
}

/* Masonry view (absolute-positioned; bottom-justified) */

/* Masonry grid must have width */
/* Default (desktop) - use PHP value, e.g. --tkf-cols:4 */
.tkf--masonry {
    --tkf-cols-default: var(--tkf-cols, 4); /* inline or PHP */
    --tkf-cols: var(--tkf-cols-default);
}

@media (max-width: 1200px) {
    .tkf--masonry { --tkf-cols: 3; }
}
@media (max-width: 992px) {
    .tkf--masonry { --tkf-cols: 2; }
}
@media (max-width: 576px) {
    .tkf--masonry { --tkf-cols: 1; }
}

.tkf--masonry .tkf-grid {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Absolute items (as before) */
.tkf--masonry .tkf-grid .tkf-card{
    position:absolute;
    box-sizing:border-box;
    padding: calc(var(--tkf-gap, 0px) / 2);
    width:auto;
    transition:top .2s,left .2s,width .2s,height .2s;
    will-change: top,left,width,height;
}
.tkf--masonry .tkf-card__media {
    position:relative;
    width: 100%;
    overflow:hidden;
    display:block;
}
.tkf--masonry .tkf-card__media > img.tkf-thumb-img{
    display:block;
    width:100%!important;
    height:100%!important;
    object-fit:cover;
}
.tkf-no-anim .tkf-card{
    transition:none!important;
}



/* =========================
   Slideshow
   ========================= */

.tkf-ss{
    /* add SAFE FALLBACKS so layout never “goes infinite” */
    --tkf-ss-w: 900px;
    --tkf-ss-h: 540px;
    --tkf-ss-strip: 96px;
    --tkf-ss-duration: .35s;

    width: min(100%, var(--tkf-ss-w, 900px)); /* fallback added */
    margin: 0 auto;
    color: var(--tkf-text, #0c0c0c);
    font: inherit;
    user-select: none;
}

.tkf-ss-link:focus {
    outline: none;
}

.tkf-ss a{ color: inherit; text-decoration: none; }

/* MAIN AREA */
.tkf-ss-main{ position: relative; width: 100%; }

.tkf-ss-viewport{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: var(--tkf-ss-h, 540px);        /* fallback added */
    border: 1px solid var(--tkf-border, #ccc);
    border-radius: 6px;
    background: var(--tkf-bg, #fff);
    box-sizing: border-box;
}

.tkf-ss-track{
    display: flex;
    height: 100%;
    transform: translateX(0);
    transition: transform var(--tkf-ss-duration, .35s) ease;
    will-change: transform;
}
.tkf-ss-track.tkf-no-anim{ transition: none !important; }

.tkf-ss-slide{
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

.tkf-ss-link{ display:block; height:100%; }

/* MEDIA (image) */
.tkf-ss-media{
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
}

.tkf-ss-img{
    width: 100% !important;        /* ensure it follows viewport, not natural width */
    height: 100% !important;
    max-width: none;               /* avoid intrinsic 2900px stretching */
    object-fit: cover;
    display: block;
    background: #f5f5f5;
}

/* Overlay badges */
.tkf-ss-Tiktok-video-icon {
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background: url(../images/icons/play.png) rgba(299, 299, 299, 0.5) no-repeat center / 34px;
    cursor: pointer;
}

.tkf-ss-Tiktok-video-icon:hover {
    background: url(../images/icons/play.png) rgba(299, 299, 299, 1) no-repeat center / 34px;
}

.tkf-ss-Tiktok-icon{ display:none; }

/* Duration badge */
.tkf-ss-duration{
    position: absolute; right: 10px; bottom: 10px; z-index: 2;
    font-size: 12px; font-weight: 600; color: #fff;
    padding: 3px 6px; border-radius: 4px; background: rgba(0,0,0,.55);
}

/* Author chip */
.tkf-ss-author{
    position: absolute; left: 10px; bottom: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 6px; border-radius: 16px;
    background: rgba(255,255,255,.8); color: #111;
}
.tkf-ss-avatar{ width: 20px; height: 20px; border-radius: 50%; display:block; }
.tkf-ss-author-name{ font-size: 12px; font-weight: 600; }

/* Meta row */
.tkf-ss-meta{
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    /* justify-content: space-between; */
    gap: 12px;
    padding: 8px 10px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    background: rgba(299, 299, 299, 0.5);
}
.tkf-ss-title{
    font-weight: 600; font-size: 14px; line-height: 1.3;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tkf-ss-stats{ display: inline-flex; align-items: center; gap: 14px; }
.tkf-ss-stat{
    font-size: 12px; color: #444; padding-left: 18px; line-height: 1;
    background-size: 14px; background-repeat: no-repeat; background-position: left center;
}
.tkf-ss-like   { background-image: url(../images/icons/like.png); }
.tkf-ss-comment{ background-image: url(../images/icons/comment.png); }
.tkf-ss-share  { background-image: url(../images/icons/share.png); }
.tkf-ss-view   { background-image: url(../images/icons/view.png); }

/* NAV arrows */
.tkf-ss-nav {
    position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 18px;
    background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.15);
    cursor: pointer;
    opacity: 0.5;
}
.tkf-ss-nav:hover {
    opacity: 0.8;
}
.tkf-ss-prev{ left: 8px; } .tkf-ss-next{ right: 8px; }
.tkf-ss-nav::before{
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 10px; height: 10px; border: 2px solid #333; border-top: 0; border-right: 0;
    transform: rotate(45deg);
}

.tkf-ss-prev::before{
    left: 4px;
}
.tkf-ss-next::before{
    transform: rotate(-135deg);
    right: 4px;
}

/* FILMSTRIP */
.tkf-ss-strip{
    margin-top: 8px;
    height: var(--tkf-ss-strip, 96px);   /* fallback added */
    display: flex; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.tkf-ss-thumb{
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 0.8;
    border-radius: 4px;
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
}
.tkf-ss-thumb img{
    width: 100%;              /* was width:auto – made it fill the box */
    height: 100%;
    object-fit: cover;
    display: block;
}
.tkf-ss-thumb.is-active{ border-color: var(--tkf-brand, #518acb); }

/* Focus / motion / small screens */
.tkf-ss-main:focus { outline: 2px solid var(--tkf-brand, #518acb); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ .tkf-ss-track{ transition: none !important; } }
@media (max-width: 640px){ .tkf-ss{ --tkf-ss-h: 56vw; } }

/* Responsive stack */
@media (max-width: 640px) {
    .tkf--blog .tkf-row {
        grid-template-columns: 1fr;
    }
    .tkf--blog .tkf-media {
        max-width: 100%;
        height: auto; /* aspect-ratio controls height */
    }
}


/* Lightbox */
iframe[src*="tiktok.com"] {
    max-height: 800px !important;
}

#tkf-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .8);
    align-items: center;
    justify-content: center;
}

.tiktok-embed{
    border-radius: 7px;
    padding: 0;
}