/* ==========================================================================
   👁️ د لیدونکو د بکس پوره ښي لوري (Right Side) ته برابرول
   ========================================================================== */
.views-counter-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* ➡️ دا لاین بکس پخپله په هېډر کې پوره ښي لوري ته بیايي */
    margin-left: auto; 
    margin-right: 20px; /* له ښي طرف څخه لږه فاصله */
    
    color: var(--text-primary, #ffffff);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 5px 10px;
    border-radius: 8px;
    transition: color 0.3s ease;
}

/* د سترګې د آیکون او د شمېر د رنګ ځانګړی کول */
.views-counter-header i,
#visit-count {
    color: #00abf0; /* ستاسو د سایټ اصلي شین رنګ */
}

/* 📱 د موبایل سکرین لپاره لږ برابرول ترڅو ځای تنګ نکړي */
@media (max-width: 768px) {
    .views-counter-header {
        font-size: 13px;
        gap: 5px;
        margin-right: 10px;
    }
}


/* ☀️ د لایټ موډ (Light Mode) لپاره د ویوز کاونټر ځانګړي تنظیمات */
body.light-mode .views-counter-header,
[data-theme="light"] .views-counter-header {
    background-color: rgba(0, 0, 0, 0.06) !important; /* په روښانه شالید کې یو نرم خړ رنګ ورکول */
    color: #222222 !important; /* د ویوز د متن او شمیرې رنګ پوره تور او واضحه کول */
    border: 1px solid rgba(0, 0, 0, 0.1) !important; /* د بکس د څرګندیدو لپاره نرمه بارډر */
}

/* په لایټ موډ کې د سترګې (Eye Icon) د رنګ پیاوړي کول */
body.light-mode .views-counter-header i,
[data-theme="light"] .views-counter-header i {
    color: #007bff !important; /* د سترګې ایکون ته یو ښکلی شین/آبي رنګ ورکول ترڅو ښه ښکاره شي */
}

/* 📱 که په موبایل کې لایټ موډ فعال وي، د اندازه او فاصلې خوندیتوب */
@media (max-width: 768px) {
    body.light-mode .views-counter-header,
    [data-theme="light"] .views-counter-header {
        font-size: 11px !important;
        padding: 3px 6px !important;
    }
}

/* 📱 د موبایل د وړو سکرینونو لپاره ځانګړی او نهایي کوډ */
@media (max-width: 768px) {
    
    /* ۱. ستاسو د پروفایل د نوم کلاس (لوګو متن) کوچنی کول ترڅو ځای شي */
    /* که ستا کلاس نوم جلا و، د .logo-name په ځای خپل کلاس نوم ولیکه */
    .logo-name, .logo, header h1, .navbar-brand {
        font-size: 16px !important; /* د نوم فونټ مې مګ مګ کوچنی کړ */
        white-space: nowrap !important;
    }

    /* ۲. د هغې کانتینر یا ښي اړخ تنظیمول چې دا دوه بټنونه پکې دي */
    .views-counter-header, 
    .theme-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: right !important; /* ښي خوا ته یې بیول */
        clear: right !important; /* یو د بل لاندې کول */
        margin-right: 5px !important;
        margin-left: 0 !important;
    }

    /* ۳. د ویوز کاونټر بکس بیخي ظریف او کوچنی کول (په پورته برخه کې) */
    .views-counter-header {
        font-size: 11px !important; /* د فونټ اندازه یو پواینټ نوره هم کوچنۍ شوه */
        padding: 3px 6px !important; /* د بکس دننه ځای مې کم کړ */
        margin-top: 5px !important;
        margin-bottom: 3px !important;
    }

    /* ۴. د ډارک موډ بټن کټ مټ د ویوز لاندې او کوچنی کول */
    .theme-btn {
        font-size: 13px !important; /* د ګیر (Gear) یا لمر د ایکون اندازه کوچنۍ شوه */
        padding: 4px !important;
        margin-top: 0 !important;
        margin-bottom: 5px !important;
    }

    /* د ویوز په دننه کې د سترګې (Eye) د ایکون اندازه */
    .views-counter-header i {
        font-size: 12px !important;
        margin-left: 4px !important; /* د متن او ایکون ترمنځ فاصله */
        margin-right: 0 !important;
    }
}