/* =========================================================
   TMV2 THEME COMPONENTS PRO PATCH
   Loader | Pagination | Theme Switch | News Card | Color Skin
========================================================= */

@layer theme-components {

    /* THEME LOADER */
    .tmv2-theme-loader {
        position: fixed;
        inset: 0;
        z-index: var(--tmv2-z-loader, 2000);
        display: grid;
        place-items: center;
        background: color-mix(in srgb, var(--tmv2-bg-surface) 94%, transparent);
        backdrop-filter: blur(8px);
        transition: opacity var(--tmv2-transition-base), visibility var(--tmv2-transition-base);
    }

        .tmv2-theme-loader.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

    .tmv2-theme-loader__box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--tmv2-space-3);
        padding: var(--tmv2-space-5);
        border-radius: var(--tmv2-radius-xl);
        background: var(--tmv2-bg-surface);
        border: 1px solid var(--tmv2-border);
        box-shadow: var(--tmv2-shadow-lg);
    }

    .tmv2-theme-loader__text {
        font-size: var(--tmv2-text-sm);
        font-weight: 700;
        color: var(--tmv2-text-soft);
    }

    /* PAGINATION */
    .tmv2-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--tmv2-space-2);
        margin-top: var(--tmv2-space-6);
    }

    .tmv2-page-link {
        min-width: 42px;
        height: 42px;
        display: inline-grid;
        place-items: center;
        padding-inline: .85rem;
        border: 1px solid var(--tmv2-border);
        border-radius: var(--tmv2-radius-md);
        background: var(--tmv2-bg-surface);
        color: var(--tmv2-text-main);
        font-size: var(--tmv2-text-sm);
        font-weight: 800;
        text-decoration: none;
        transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
    }

        .tmv2-page-link:hover,
        .tmv2-page-link.is-active,
        .tmv2-page-link.active {
            background: var(--tmv2-color-primary);
            color: var(--tmv2-text-inverse);
            border-color: var(--tmv2-color-primary);
            transform: translateY(-2px);
        }

        .tmv2-page-link.is-disabled,
        .tmv2-page-link.disabled {
            opacity: .5;
            pointer-events: none;
        }

    /* NEWS / CONTENT CARD */
    .tmv2-news-card {
        position: relative;
        background: var(--tmv2-bg-surface);
        border: 1px solid var(--tmv2-border);
        border-radius: var(--tmv2-radius-xl);
        overflow: hidden;
        box-shadow: var(--tmv2-shadow-xs);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

        .tmv2-news-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--tmv2-shadow-md);
            border-color: var(--tmv2-color-primary-border);
        }

    .tmv2-news-img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        background: var(--tmv2-bg-surface-2);
        transition: transform .45s ease;
    }

    .tmv2-news-card:hover .tmv2-news-img {
        transform: scale(1.05);
    }

    .tmv2-news-body {
        padding: var(--tmv2-space-5);
    }

    .tmv2-news-title {
        margin: 0 0 var(--tmv2-space-2);
        color: var(--tmv2-text-dark);
        font-size: var(--tmv2-text-lg);
        font-weight: 850;
        line-height: 1.25;
    }

        .tmv2-news-title a {
            color: inherit;
            text-decoration: none;
        }

            .tmv2-news-title a:hover {
                color: var(--tmv2-color-primary);
            }

    .tmv2-news-summary {
        margin: 0;
        color: var(--tmv2-text-soft);
        font-size: var(--tmv2-text-sm);
        line-height: 1.7;
    }

    .tmv2-news-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--tmv2-space-2);
        margin-bottom: var(--tmv2-space-3);
        color: var(--tmv2-text-muted);
        font-size: var(--tmv2-text-xs);
        font-weight: 700;
    }

    /* THEME SWITCHER */
    .tmv2-theme-switcher {
        display: inline-flex;
        align-items: center;
        gap: var(--tmv2-space-2);
        padding: .35rem;
        border-radius: var(--tmv2-radius-pill);
        background: var(--tmv2-bg-surface-2);
        border: 1px solid var(--tmv2-border);
    }

    .tmv2-theme-dot {
        width: 28px;
        height: 28px;
        border-radius: var(--tmv2-radius-pill);
        border: 2px solid var(--tmv2-bg-surface);
        cursor: pointer;
        box-shadow: var(--tmv2-shadow-xs);
        transition: transform .2s ease, outline .2s ease;
    }

        .tmv2-theme-dot:hover,
        .tmv2-theme-dot.is-active {
            transform: scale(1.08);
            outline: 2px solid var(--tmv2-color-primary);
            outline-offset: 2px;
        }

    .tmv2-theme-dot--default {
        background: #CABA9F;
    }

    .tmv2-theme-dot--blue {
        background: #2563eb;
    }

    .tmv2-theme-dot--red {
        background: #dc2626;
    }

    .tmv2-theme-dot--green {
        background: #16a34a;
    }

    .tmv2-theme-dot--purple {
        background: #7c3aed;
    }

    .tmv2-theme-dot--gold {
        background: #d4af37;
    }

    /* THEME SURFACE */
    .tmv2-theme-surface {
        background: radial-gradient(circle at top right, color-mix(in srgb, var(--tmv2-color-primary) 12%, transparent), transparent 36%), var(--tmv2-bg-surface);
        border: 1px solid var(--tmv2-border);
        border-radius: var(--tmv2-radius-2xl);
        box-shadow: var(--tmv2-shadow-xs);
    }

    /* BRAND STRIP */
    .tmv2-brand-strip {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--tmv2-space-5);
        padding: var(--tmv2-space-5);
        border-radius: var(--tmv2-radius-xl);
        background: var(--tmv2-bg-surface);
        border: 1px solid var(--tmv2-border);
    }

        .tmv2-brand-strip img {
            max-height: 44px;
            object-fit: contain;
            opacity: .75;
            transition: opacity .2s ease, transform .2s ease;
        }

            .tmv2-brand-strip img:hover {
                opacity: 1;
                transform: scale(1.04);
            }
}