/* ============================================================
   LINKDONI DESIGN SETTINGS
============================================================ */

:root {

    /* تعداد ستون‌ها */
    --ld-columns-desktop: 3;
    --ld-columns-tablet: 2;
    --ld-columns-mobile: 1;

    /* ابعاد */
    --ld-max-width: 1180px;
    --ld-grid-gap: 12px;
    --ld-card-padding: 13px;
    --ld-card-radius: 17px;
    --ld-avatar-size: 58px;

    /* رنگ‌ها */
    --ld-page-bg: #eef1f6;
    --ld-text: #1d2130;
    --ld-muted: #7f8596;

    --ld-group: #477bea;
    --ld-group-soft: #edf3ff;
    --ld-group-card: #f8faff;

    --ld-channel: #7854d8;
    --ld-channel-soft: #f3efff;
    --ld-channel-card: #fbf9ff;

    --ld-green: #25ba68;

    --ld-border: #dde2ec;

    --ld-shadow:
        0 4px 15px
        rgba(34, 40, 68, .045);

    --ld-shadow-hover:
        0 13px 32px
        rgba(34, 40, 68, .105);
}


/* ============================================================
   PAGE
============================================================ */

.linkdoni-page,
.linkdoni-page * {
    box-sizing: border-box;
}

.linkdoni-page {
    direction: rtl;

    min-height: 100vh;

    padding:
        28px 14px
        58px;

    color: var(--ld-text);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(86, 95, 210, .075),
            transparent 27%
        ),
        radial-gradient(
            circle at 0% 60%,
            rgba(71, 123, 234, .045),
            transparent 25%
        ),
        var(--ld-page-bg);
}

.linkdoni-shell {
    width:
        min(
            var(--ld-max-width),
            100%
        );

    margin-inline: auto;
}


/* ============================================================
   HERO
============================================================ */

.linkdoni-hero {
    position: relative;

    overflow: hidden;

    padding:
        23px 27px;

    margin-bottom: 27px;

    border:
        1px solid
        rgba(216, 220, 234, .9);

    border-radius: 20px;

    background:
        linear-gradient(
            140deg,
            #f9faff 0%,
            #f1f4fb 100%
        );

    box-shadow:
        0 11px 35px
        rgba(37, 42, 69, .055);
}

.linkdoni-hero::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    left: -100px;
    top: -135px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #665cef,
            #4c91f0
        );

    opacity: .105;
}

.linkdoni-hero-content {
    position: relative;
    z-index: 2;
}

.linkdoni-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        5px 10px;

    margin-bottom: 7px;

    border:
        1px solid
        rgba(98, 91, 246, .12);

    border-radius: 999px;

    color: #5954c8;

    background:
        rgba(240, 240, 255, .75);

    font-size: 9px;

    font-weight: 900;
}

.linkdoni-eyebrow-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #635cf2;
}

.linkdoni-title {
    margin: 0;

    color: #1b1e2b;

    font-size:
        clamp(
            25px,
            3vw,
            37px
        );

    line-height: 1.45;

    font-weight: 950;
}

.linkdoni-description {
    margin:
        4px 0 0;

    color: #747a8b;

    font-size: 12px;

    line-height: 1.8;
}


/* ============================================================
   STATS
============================================================ */

.linkdoni-stats {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 15px;
}

.linkdoni-stat {
    display: flex;

    align-items: baseline;

    gap: 6px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(215, 219, 232, .85);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, .55);
}

.linkdoni-stat strong {
    color: #282c3c;

    font-size: 14px;

    font-weight: 950;
}

.linkdoni-stat span {
    color: #8c919f;

    font-size: 9px;

    font-weight: 800;
}


/* ============================================================
   SECTIONS
============================================================ */

.linkdoni-section {
    margin-top: 25px;
}

.linkdoni-section--channels {
    margin-top: 38px;
}

.linkdoni-section-head {
    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    gap: 12px;

    margin:
        0 3px
        12px;
}

.linkdoni-section-kicker {
    display: block;

    margin-bottom: 1px;

    color: #a1a5b1;

    font-size: 7px;

    letter-spacing: 2px;

    font-weight: 900;
}

.linkdoni-section-title {
    position: relative;

    margin: 0;

    padding-right: 12px;

    color: #252936;

    font-size: 17px;

    font-weight: 950;
}

.linkdoni-section-title::before {
    content: "";

    position: absolute;

    right: 0;
    top: 5px;

    width: 4px;
    height: 17px;

    border-radius: 10px;
}

.linkdoni-section--groups
.linkdoni-section-title::before {
    background:
        var(--ld-group);
}

.linkdoni-section--channels
.linkdoni-section-title::before {
    background:
        var(--ld-channel);
}

.linkdoni-section-counter {
    padding:
        5px 9px;

    border:
        1px solid
        #dfe2eb;

    border-radius: 999px;

    color: #8b909e;

    background:
        rgba(255, 255, 255, .55);

    font-size: 8px;

    font-weight: 800;
}


/* ============================================================
   GRID
============================================================ */

.linkdoni-grid {
    display: grid;

    grid-template-columns:
        repeat(
            var(--ld-columns-desktop),
            minmax(0, 1fr)
        );

    gap:
        var(--ld-grid-gap);
}


/* ============================================================
   CARD
============================================================ */

.linkdoni-card {
    --card-accent:
        var(--ld-group);

    --card-soft:
        var(--ld-group-soft);

    --card-bg:
        var(--ld-group-card);

    position: relative;

    min-width: 0;

    padding:
        var(--ld-card-padding);

    overflow: hidden;

    border:
        1px solid
        var(--ld-border);

    border-radius:
        var(--ld-card-radius);

    background:
        linear-gradient(
            145deg,
            var(--card-bg) 0%,
            #f6f8fc 100%
        );

    box-shadow:
        var(--ld-shadow);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.linkdoni-card--channel {
    --card-accent:
        var(--ld-channel);

    --card-soft:
        var(--ld-channel-soft);

    --card-bg:
        var(--ld-channel-card);
}

.linkdoni-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    opacity: .72;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--card-accent),
            transparent
        );
}

.linkdoni-card::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    left: -45px;
    bottom: -55px;

    border-radius: 50%;

    background:
        var(--card-accent);

    opacity: .025;

    pointer-events: none;
}

.linkdoni-card:hover {
    transform:
        translateY(-3px);

    border-color:
        color-mix(
            in srgb,
            var(--card-accent) 20%,
            #d9dde7
        );

    box-shadow:
        var(--ld-shadow-hover);
}


/* ============================================================
   CARD TOP
============================================================ */

.linkdoni-card-top {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}

.linkdoni-avatar-wrap {
    position: relative;

    width:
        var(--ld-avatar-size);

    min-width:
        var(--ld-avatar-size);

    height:
        var(--ld-avatar-size);
}

.linkdoni-avatar {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border:
        2px solid
        rgba(255,255,255,.95);

    border-radius: 15px;

    background:
        var(--card-soft);

    box-shadow:
        0 5px 13px
        rgba(29, 34, 62, .105);
}

.linkdoni-avatar-status {
    position: absolute;

    right: -2px;
    bottom: -2px;

    width: 14px;
    height: 14px;

    border:
        3px solid #f8faff;

    border-radius: 50%;

    background:
        var(--ld-green);
}

.linkdoni-card-main {
    flex: 1;
    min-width: 0;
}

.linkdoni-type-row {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 4px;
}

.linkdoni-type {
    display: inline-flex;

    padding:
        4px 8px;

    border-radius: 999px;

    color:
        var(--card-accent);

    background:
        var(--card-soft);

    font-size: 8px;

    line-height: 1;

    font-weight: 950;
}

.linkdoni-verified {
    display: inline-flex;

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

    width: 14px;
    height: 14px;

    border-radius: 50%;

    color: #fff;

    background:
        #4e7bf1;

    font-size: 8px;

    font-weight: 950;
}

.linkdoni-card-title {
    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    min-height: 39px;

    margin: 0;

    overflow: hidden;

    color: #222633;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 950;

    word-break: break-word;
}


/* ============================================================
   META BAR
============================================================ */

.linkdoni-card-meta {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        1px
        minmax(0, 1fr);

    align-items: center;

    gap: 7px;

    margin-top: 10px;

    padding:
        7px 9px;

    border:
        1px solid
        rgba(218, 222, 233, .85);

    border-radius: 10px;

    background:
        rgba(238, 241, 247, .72);
}

.linkdoni-meta-divider {
    width: 1px;
    height: 27px;

    background:
        #dfe2ea;
}

.linkdoni-meta-item {
    display: flex;

    align-items: center;

    gap: 6px;

    min-width: 0;
}

.linkdoni-meta-icon {
    display: flex;

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

    width: 24px;
    min-width: 24px;
    height: 24px;

    border-radius: 7px;

    color:
        var(--card-accent);

    background:
        rgba(255,255,255,.75);

    font-size: 11px;

    font-weight: 950;
}

.linkdoni-meta-label {
    display: block;

    margin-bottom: 1px;

    color: #9a9eac;

    font-size: 7px;

    font-weight: 800;
}

.linkdoni-meta-item strong {
    display: block;

    overflow: hidden;

    color: #404452;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 900;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.linkdoni-meta-user {
    min-width: 0;
}


/* ============================================================
   ACTIONS
============================================================ */

.linkdoni-actions {
    display: grid;

    grid-template-columns:
        1fr 48px;

    gap: 6px;

    margin-top: 8px;
}

.linkdoni-enter {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    height: 38px;

    padding:
        0 10px;

    border-radius: 9px;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            var(--card-accent),
            color-mix(
                in srgb,
                var(--card-accent) 74%,
                #326feb
            )
        );

    box-shadow:
        0 6px 14px
        color-mix(
            in srgb,
            var(--card-accent) 18%,
            transparent
        );

    text-decoration: none !important;

    font-size: 9px;

    font-weight: 950;

    transition:
        transform .18s ease,
        filter .18s ease;
}

.linkdoni-enter:hover {
    color: #fff !important;

    transform:
        translateY(-1px);

    filter:
        brightness(1.04);
}

.linkdoni-enter-arrow {
    font-size: 14px;
}

.linkdoni-rank {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 38px;

    border:
        1px solid
        #dfe2ea;

    border-radius: 9px;

    color: #707687;

    background:
        rgba(255,255,255,.5);
}

.linkdoni-rank small {
    font-size: 6px;

    line-height: 1;

    color: #a1a5b1;
}

.linkdoni-rank strong {
    margin-top: 2px;

    font-size: 9px;

    line-height: 1;

    font-weight: 950;
}


/* ============================================================
   PAGINATION
============================================================ */

.linkdoni-pagination-wrap {
    margin-top: 29px;
}

.linkdoni-pagination {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 5px;
}

.linkdoni-page-link {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 34px;
    height: 34px;

    padding-inline: 9px;

    border:
        1px solid
        #dce0e9;

    border-radius: 9px;

    color: #5e6372 !important;

    background:
        rgba(255,255,255,.65);

    text-decoration: none !important;

    font-size: 9px;

    font-weight: 900;
}

.linkdoni-page-link:hover {
    background: #fff;
}

.linkdoni-page-link.is-current {
    border-color: transparent;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #635cf1,
            #4d7fe8
        );

    box-shadow:
        0 6px 15px
        rgba(83, 84, 210, .18);
}

.linkdoni-page-dots {
    width: 22px;

    color: #9ca1af;

    text-align: center;
}


/* ============================================================
   MESSAGE
============================================================ */

.linkdoni-message {
    padding: 24px;

    border:
        1px solid
        var(--ld-border);

    border-radius: 14px;

    color: #858a99;

    background:
        rgba(255,255,255,.6);

    text-align: center;
}


/* ============================================================
   RESPONSIVE
   فقط breakpointها را اگر خواستی تغییر بده.

   Desktop > 980px
   Tablet  <= 980px
   Mobile  <= 620px
============================================================ */

@media (max-width: 980px) {

    .linkdoni-grid {
        grid-template-columns:
            repeat(
                var(--ld-columns-tablet),
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 620px) {

    .linkdoni-page {
        padding:
            14px 9px
            45px;
    }

    .linkdoni-grid {
        grid-template-columns:
            repeat(
                var(--ld-columns-mobile),
                minmax(0, 1fr)
            );
    }

    .linkdoni-hero {
        padding:
            18px 15px;

        margin-bottom: 20px;

        border-radius: 16px;
    }

    .linkdoni-section--channels {
        margin-top: 31px;
    }

    .linkdoni-section-head {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 5px;
    }

}


@media (max-width: 380px) {

    :root {
        --ld-card-padding: 11px;
        --ld-avatar-size: 53px;
    }

    .linkdoni-card-meta {
        grid-template-columns: 1fr;
    }

    .linkdoni-meta-divider {
        display: none;
    }

}


/* ============================================================
   ADMIN BAN BUTTON
   فقط مدیر وردپرس آن را می‌بیند.
============================================================ */

.linkdoni-admin-ban-form {
    position: absolute;

    z-index: 20;

    top: 8px;
    left: 8px;

    margin: 0;
    padding: 0;
}

.linkdoni-admin-ban {
    display: flex;

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

    width: 25px;
    height: 25px;

    padding: 0;

    border:
        1px solid
        rgba(222, 76, 76, .20);

    border-radius: 8px;

    color: #c84646;

    background:
        rgba(255, 239, 239, .88);

    box-shadow:
        0 3px 9px
        rgba(100, 30, 30, .07);

    cursor: pointer;

    font-family: Arial, sans-serif;

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

    font-weight: 400;

    transition:
        color .16s ease,
        background .16s ease,
        transform .16s ease,
        border-color .16s ease;
}

.linkdoni-admin-ban:hover {
    transform: scale(1.07);

    color: #fff;

    border-color: #df4545;

    background: #df4545;
}