/* ==========================================================================
   ✨ د پروژو د تفصیلي برخې لپاره پرمختللي هوور (Hover Effects)
   ========================================================================== */

/* ۱. د بټنونو لپاره نرم او ژوندی هوور (Live System Button) */
.demo-btn.live {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.demo-btn.live::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
    z-index: -1;
}

.demo-btn.live:hover::before {
    left: 100%; /* د لایټ ځلا تېرېدل په بټن باندې */
}

.demo-btn.live:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 171, 240, 0.4) !important;
    background: #020d18;
}

/* ۲. د دوهمو بټنونو لپاره (Docs / Source Code) منظم هوور */
.demo-btn.docs, .demo-btn.source {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.demo-btn.docs:hover, .demo-btn.source:hover {
    transform: translateY(-4px);
    background: #00abf0 !important;
    border-color: #00abf0 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 171, 240, 0.3);
}

/* ۳. د اسانتیاوو د لېست (Features List) لپاره интерактив هوور */
.features-list li {
    transition: all 0.3s ease;
    padding: 4px 8px;
    border-radius: 6px;
}

.features-list li:hover {
    background: rgba(0, 171, 240, 0.04);
    transform: translateX(8px); /* لږ ښي لوري ته په نرمۍ حرکت کوي */
    color: #020d18 !important;
}

/* د ډارک موډ پر مهال د لېست د متن رنګ په هوور کې */
[data-theme="dark"] .features-list li:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff !important;
}

/* ۴. د کارول شویو ټیکنالوژیو او وسایلو د بکسونو (Tags) حرکت */
.tech-used span, .hardware-used span {
    transition: all 0.3s ease;
    cursor: default;
}

.tech-used span:hover, .hardware-used span:hover {
    transform: translateY(-3px);
    color: rgb(7, 7, 7) !important;
    border-color: #00abf0 !important;
    box-shadow: 0 5px 12px rgba(0, 171, 240, 0.25);
}

/* ۵. د انځور د چوکاټ (Image Placeholder) لپاره پرمختللی اغېز */
.image-placeholder {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-placeholder:hover {
    transform: scale(1.03) rotate(0.5deg); /* د غټېدو او لږ کږېدو ډېر ښکلی انیمیشن */
    border-color: #00abf0 !important;
    box-shadow: 0 15px 35px rgba(0, 171, 240, 0.15) !important;
}

.image-placeholder:hover .placeholder-icon {
    transform: scale(1.1) translateY(-5px);
    color: #00abf0 !important;
}

.placeholder-icon {
    transition: all 0.4s ease;
}

/* ==========================================================================
   🌐 د پروژو د پوره تفصیلي مینو سټایل (Skills Style)
   ========================================================================== */
.details-section {
    padding: 100px 10% 80px 10%;
    background: #ffffff; /* ⚪ کټ مټ ستاسو د سایټ د سکیل غوندې سپین رنګ */
    font-family: 'Poppins', sans-serif;
}

.main-title {
    text-align: center;
    margin-bottom: 70px;
}

.main-title h2 {
    font-size: 38px;
    color: #020d18;
    font-weight: 700;
}

.main-title h2 span {
    color: #00abf0; /* ستاسو نیلي رنګ */
}

.main-title p {
    color: #666;
    font-size: 16px;
    margin-top: 10px;
}

/* 📦 د پروژو عمومي کانټینر */
.details-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* ⚡ د هرې پروژې لویه رانجه (Row) */
.detail-row {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* 🔄 د چپ او ښي د متناوب حالت لپاره (روزي سټایل) */
.detail-row.reverse {
    flex-direction: row-reverse;
}

/* 📝 د متنونو برخه */
.detail-text {
    flex: 1;
    text-align: left;
}

.project-number {
    font-size: 14px;
    font-weight: 700;
    color: #00abf0;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 8px;
}

.detail-text h3 {
    font-size: 28px;
    color: #020d18;
    margin-bottom: 15px;
    font-weight: 600;
}

.project-intro {
    font-size: 15.5px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
}

.detail-text h4 {
    font-size: 16px;
    color: #020d18;
    margin-bottom: 12px;
    font-weight: 600;
}

/* 📌 د ځانګړتیاوو لېست */
.features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.features-list li {
    font-size: 14.5px;
    color: #555;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.features-list li i {
    color: #00abf0;
    margin-top: 3px;
}

/* 🏷️ د کارول شوې ټیکنالوژۍ لېبلونه */
.tech-used {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.tech-used span {
    background: rgba(2, 13, 24, 0.05);
    color: #020d18;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* 🔗 د ایکشنونو او ډیمو بټنونه */
.project-actions {
    display: flex;
    gap: 15px;
}

.demo-btn {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.demo-btn.live {
    background: #00abf0;
    color: #fff;
}

.demo-btn.live:hover {
    background: #020d18;
    box-shadow: 0 5px 15px rgba(0, 171, 240, 0.3);
}

.demo-btn.docs, .demo-btn.source {
    background: transparent;
    color: #020d18;
    border: 2px solid #020d18;
}

.demo-btn.docs:hover, .demo-btn.source:hover {
    background: #020d18;
    color: #fff;
}

/* 🖼️ د عکس یا ډیمو ځای (Visual Box) */
.detail-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.image-placeholder {
    width: 100%;
    max-width: 500px;
    height: 300px;
    background: #f8f9fa;
    border: 2px dashed rgba(0, 171, 240, 0.2);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #aaa;
    transition: all 0.3s ease;
}

.image-placeholder:hover {
    border-color: #00abf0;
    background: rgba(0, 171, 240, 0.02);
}

.placeholder-icon {
    font-size: 50px;
    color: rgba(0, 171, 240, 0.3);
    margin-bottom: 12px;
}

.project-separator {
    border: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 20px 0;
}

/* ==========================================================================
   📱 د موبایل او کوچنیو سکرینونو (Responsive) لپاره پوره چمتووالی
   ========================================================================== */
@media (max-width: 991px) {
    .detail-row, .detail-row.reverse {
        flex-direction: column !important; /* کالمونه د یو بل لاندې کول */
        gap: 35px;
    }
    
    .detail-text {
        text-align: left;
        width: 100%;
    }
    
    .detail-visual {
        width: 100%;
    }
    
    .image-placeholder {
        max-width: 100%;
        height: 250px;
    }
}

@media (max-width: 576px) {
    .details-section {
        padding: 80px 5% 60px 5%; /* د موبایل غاړو ته د فاصلې کمول */
    }
    .main-title h2 {
        font-size: 30px;
    }
    .detail-text h3 {
        font-size: 22px;
    }
    .project-actions {
        flex-direction: column; /* بټنونه د یو بل لاندې کول */
        gap: 10px;
    }
    .demo-btn {
        justify-content: center;
    }
   
}

/* ==========================================================================
   📱 د موبایل سکرین لپاره د هارډویر او ټیکنالوژۍ د بکسونو سمون
   ========================================================================== */

/* دا سټایل یوازې په موبایل او کوچنیو سکرینونو (لکه د 768px څخه لاندې) پلي کېږي */
@media (max-width: 768px) {
    
    /* د هارډویر عمومي کانټینر په موبایل کې په منځ کې کول */
    .hardware-used, 
    .tech-used {
        display: flex;
        flex-direction: column; /* باکونه د یو بل لاندې کول */
        align-items: center;    /* ټول په پوره توګه په منځ کې راوستل */
        justify-content: center;
        gap: 12px;              /* د یو او بل باک ترمنځ مناسبه فاصله */
        width: 100%;            /* پوره برګوالی ورکول */
        padding: 0 10px;
    }

    /* د هر فردي باک (span) پوره برابرول او ډیزاین په موبایل کې */
    .hardware-used span, 
    .tech-used span {
        width: 100%;            /* په موبایل کې ټول باکونه یو برابر او پوره برګېږي */
        max-width: 340px;       /* د دې لپاره چې په غټو موبایلونو کې بیخي زیات او بې خونده برګ نشي */
        text-align: center;     /* د باک ننه لیکل په منځ کې کول */
        justify-content: center;/* آیکن او متن په منځ کې راوستل */
        display: inline-flex;
        align-items: center;
        padding: 10px 20px;     /* په موبایل کې د کلیک او لیدلو لپاره د باکونو لږ غټول */
        font-size: 14px;        /* د متن د لوستلو ښه اندازه */
        box-sizing: border-box;
    }

    /* د آیکنونو او متن ترمنځ فاصله په منځني حالت کې */
    .hardware-used span i, 
    .tech-used span i {
        margin-right: 8px;      /* آیکن ته له متن څخه لږ فاصله ورکول */
    }
    
    h4{
        text-align: center;
    }

}

/* ==========================================================================
   🌙 د پروژو د تفصیلي برخې لپاره د ډارک موډ دقیق سټایل (data-theme)
   ========================================================================== */

/* ۱. کله چې ډارک موډ فعال وي، د ټولې برخې شالید په پوره توګه توره کړه */
[data-theme="dark"] .details-section {
    background: #020d18 !important; /* ستاسو د سایټ اصلي تیاره شین/تور رنګ */
}

/* ۲. د اصلي لوی سرلیک او نورو سرلیکونو رنګ سپینول */
[data-theme="dark"] .main-title h2,
[data-theme="dark"] .detail-text h3,
[data-theme="dark"] .detail-text h4 {
    color: #ffffff !important;
}

/* ۳. د فرعي او توضیحي متنونو رنګ روښانه خاورین کول */
[data-theme="dark"] .main-title p,
[data-theme="dark"] .project-intro,
[data-theme="dark"] .features-list li {
    color: #b0c4de !important; /* نرم روښانه خاورین رنګ د لوستلو لپاره */
}

/* ۴. د کارول شویو ټیکنالوژیو (Tags) د بکسونو رنګ بدلول */
[data-theme="dark"] .tech-used span {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #00abf0 !important; /* ستاسو کټ مټ روښانه شین رنګ */
    border-color: rgba(0, 171, 240, 0.2) !important;
}

/* ۵. د انځورونو د چوکاټ (Placeholder) سټایل په ډارک موډ کې */
[data-theme="dark"] .image-placeholder {
    background: #061524 !important;
    border-color: rgba(0, 171, 240, 0.2) !important;
    color: #888 !important;
}

/* ۶. د دوهمې بټنې (Docs او Source Code) رنګ په ډارک موډ کې */
[data-theme="dark"] .demo-btn.docs, 
[data-theme="dark"] .demo-btn.source {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

[data-theme="dark"] .demo-btn.docs:hover, 
[data-theme="dark"] .demo-btn.source:hover {
    background: #ffffff !important;
    color: #020d18 !important;
}

/* ۷. د جلا کونکې کرښې (Separator) کم رنګه کول */
[data-theme="dark"] .project-separator {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* 🛠️ د هارډویر او وسایلو د لېبلونو سټایل */
.hardware-used {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.hardware-used span {
    background: rgba(0, 171, 240, 0.05);
    color: #020d18;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid rgba(0, 171, 240, 0.15);
}

.hardware-used span i {
    color: #00abf0;
    margin-right: 5px;
}

/* 🌙 په ډارک موډ کې د هارډویر د لېبلونو بدلېدل */
[data-theme="dark"] .hardware-used span {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .hardware-used span i {
    color: #00abf0 !important;
}

/* 📸 د ګالري اصلي چوکاټ */
.project-gallery {
    width: 100%;
    max-width: 500px;
    position: relative;
    cursor: pointer;
}

.main-gallery-thumb {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(0, 171, 240, 0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: all 0.4s ease;
}

.main-gallery-thumb img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* ✨ کله چې ماوس په عکس راشي نو د رنګ تیاره کېدل او پوښ راوستل */
.gallery-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(2, 13, 24, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0;
    transition: all 0.4s ease;
}

.main-gallery-thumb:hover .gallery-overlay {
    opacity: 1;
}

.main-gallery-thumb:hover img {
    transform: scale(1.05);
}

.gallery-overlay i {
    font-size: 32px;
    color: #00abf0;
    margin-bottom: 8px;
}

/* 🧱 د لوی سکرین پوپ‌اپ مډال (Lightbox Modal) */
.lightbox-modal {
    display: none; /* په لومړي سر کې پټ وي */
    position: fixed;
    z-index: 99999; /* تر ټولو عناصرو د پاسه راځي */
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(2, 13, 24, 0.95); /* د ډارک موډ سره سم پوره شفاف تور باګرونډ */
    align-items: center;
    justify-content: center;
}

.lightbox-content-box {
    max-width: 85%;
    max-height: 80vh;
    text-align: center;
}

.lightbox-content-box img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: 8px;
    border: 3px solid #00abf0;
    box-shadow: 0 0 25px rgba(0, 171, 240, 0.5);
    animation: zoomIn 0.3s ease;
}

/* 🏷️ د عکسونو لاندې د تشرېح ځای */
#lightbox-caption {
    color: #fff;
    font-size: 16px;
    margin-top: 15px;
    font-family: 'Poppins', sans-serif;
}

/* ❌ د بندولو بټن (Close) */
.close-lightbox {
    position: absolute;
    top: 30px; right: 40px;
    color: #fff; font-size: 45px; font-weight: bold;
    cursor: pointer; transition: 0.3s;
}
.close-lightbox:hover { color: #00abf0; }

/* 👈 👉 د مخکې او شاته تلو بټنونه */
.lightbox-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.05);
    color: white; border: 1px solid rgba(255,255,255,0.1);
    font-size: 30px; padding: 15px 20px;
    cursor: pointer; border-radius: 8px;
    transition: 0.3s;
}
.lightbox-nav:hover { background: #00abf0; border-color: #00abf0; }
.lightbox-nav.prev { left: 40px; }
.lightbox-nav.next { right: 40px; }

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 📱 په موبایل کې د بټنونو د اندازې سمون */
@media (max-width: 768px) {
    .lightbox-nav { padding: 10px 15px; font-size: 20px; }
    .lightbox-nav.prev { left: 10px; }
    .lightbox-nav.next { right: 10px; }
    .close-lightbox { top: 15px; right: 20px; font-size: 35px; }
}