/* non-critical.css - أنماط غير حرجة للتأثيرات والحركات */
/* GitHub: https://github.com/kamel2021/blog-css-assets */

/* ==================== تأثيرات HOVER للصور ==================== */
.blogPosts .hentry:hover img {
    transform: scale(1.05) rotate(0.5deg);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1.02);
}

.post-thumbnail:hover img {
    transform: scale(1.08);
    transition: transform 0.5s ease;
}

.img-link:hover img {
    transform: scale(1.1) rotate(1deg);
    filter: saturate(1.1);
}

.widget-content .cust-widget .cust-post:hover img {
    transform: scale(1.15) rotate(2deg);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar .itemPopular:hover img {
    transform: scale(1.12) rotate(-1deg);
    transition: transform 0.4s ease;
}

.cust-widget.pt_4 .cust-post:hover .article-image img {
    transform: scale(1.18) rotate(3deg);
    filter: contrast(1.05);
}

.itemFeatured:hover .itemThumbnail img {
    transform: scale(1.1) rotate(0.8deg);
    transition: transform 0.6s ease;
}

/* ==================== تأثيرات القوائم ==================== */
.menu li.drop-menu:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu li.drop-menu .bot-menu:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    right: 100%;
}

.htmlMenu .link:hover .name {
    color: #2962ff;
    transform: translateX(-3px);
    transition: all 0.2s ease;
}

.menu li.drop-menu:hover > span.down svg,
.menu li.drop-menu .bot-menu:hover > span.down svg {
    fill: #2962ff;
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* ==================== تأثيرات الأزرار ==================== */
.button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(41, 98, 255, 0.2);
    background-color: #1a4fd8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button.outline:hover {
    border-color: #2962ff;
    color: #2962ff;
    background-color: rgba(41, 98, 255, 0.05);
}

.button.whatsapp:hover {
    background-color: #128C7E;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.2);
}

.button.facebook:hover {
    background-color: #3b5998;
    box-shadow: 0 10px 25px rgba(59, 89, 152, 0.2);
}

.button.youtube:hover {
    background-color: #FF0000;
    box-shadow: 0 10px 25px rgba(255, 0, 0, 0.2);
}

/* تأثيرات أزرار التنقل */
.post-pages a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(41, 98, 255, 0.25);
    letter-spacing: 0.5px;
}

.pJmp:hover {
    background-color: #1a4fd8;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(41, 98, 255, 0.2);
}

/* ==================== تأثيرات الروابط ==================== */
a:hover {
    color: #2962ff;
}

.postTitle a:hover {
    color: #1a4fd8;
    text-decoration: underline;
}

.sidebar .itemTitle a:hover {
    color: #2e2e2e;
    text-decoration: underline;
}

.header-widget h1.blog-title a:hover,
.header-widget h2.blog-title a:hover {
    color: #1a4fd8;
    text-decoration: none;
}

.footer a:hover {
    color: #1a4fd8 !important;
    text-decoration: underline;
}

.postTimestamp:hover {
    color: #2962ff;
    text-decoration: underline;
}

/* ==================== تأثيرات البطاقات والصناديق ==================== */
.blogPosts .hentry:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border-color: rgba(41, 98, 255, 0.2);
}

.cust-widget.pt_4 .cust-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    background-color: #f9f9f9;
}

.itemPopular:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.itemFeatured:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.13);
    border-color: #2962ff;
}

/* ==================== تأثيرات التنقل ==================== */
.nav-item:hover {
    background: rgba(41, 98, 255, 0.08);
    color: #2962ff;
    transform: translateY(-1px);
}

.htmlMenu li:hover {
    background-color: rgba(41, 98, 255, 0.05);
    border-radius: 4px;
}

.PageList ul li:hover a {
    color: #2962ff;
    padding-right: 25px;
    transition: all 0.2s ease;
}

.PageList ul li:hover a:after {
    transform: translateX(-3px) scale(1.2);
    transition: transform 0.2s ease;
}

/* ==================== تأثيرات الشبكات ==================== */
.zodiac-grid a:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, #ffffff, #f5f7fa);
    color: #2962ff;
    border-right-color: #2962ff;
}

.zodiac-links a:hover {
    background: #2962ff;
    color: white;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(41, 98, 255, 0.25);
    border-color: #2962ff;
}

/* ==================== تأثيرات الجداول ==================== */
table tr:hover td {
    background-color: #f5f9ff;
    transform: scale(1.001);
    transition: background-color 0.2s ease;
}

.post table tr:hover td {
    background-color: #f0f7ff;
    color: #2962ff;
}

/* ==================== تأثيرات المشاركة ==================== */
.sharing_button:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.sharing_button.facebook:hover {
    background-color: #365899;
    transform: translateY(-3px) rotate(2deg);
}

.sharing_button.twitter:hover {
    background-color: #1a91da;
    transform: translateY(-3px) rotate(-1deg);
}

.sharing_button.whatsapp:hover {
    background-color: #00a859;
    transform: translateY(-3px) scale(1.15);
}

.sharing_button.telegram:hover {
    background-color: #2aa1d6;
    transform: translateY(-3px) rotate(1deg);
}

/* ==================== تأثيرات النماذج ==================== */
input:hover, textarea:hover {
    border-color: #2962ff;
    box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.1);
}

input:focus:hover, textarea:focus:hover {
    border-color: #1a4fd8;
    box-shadow: 0 0 0 4px rgba(41, 98, 255, 0.15);
}

.contact-form-button-submit:hover {
    background-color: #1a4fd8;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(41, 98, 255, 0.25);
}

/* ==================== تأثيرات التعليقات ==================== */
.cmAv:hover img {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.3);
    transition: all 0.3s ease;
}

.cmAc a:hover {
    background-color: rgba(41, 98, 255, 0.1);
    color: #2962ff;
    padding-left: 20px;
    padding-right: 20px;
}

.comment-avatar:hover {
    transform: scale(1.08);
    filter: brightness(1.1);
}

/* ==================== تأثيرات متنوعة ==================== */
.quote:hover {
    border-right-color: #2962ff;
    background-color: #f8fafc;
    transform: translateX(-5px);
}

.highlight-box:hover {
    border-right-color: #2962ff;
    background-color: #f0f7ff;
    transform: translateY(-3px);
}

.intro-box:hover {
    background-color: #e0f7fa;
    border-color: #00bcd4;
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.1);
}

.faq-item:hover {
    background-color: #f9f9f9;
    border-left: 3px solid #2962ff;
    padding-left: 12px;
}

.update-notice:hover {
    background: linear-gradient(135deg, #b2ebf2, #80deea);
    box-shadow: 0 8px 25px rgba(0, 150, 136, 0.15);
}

.warning-box:hover {
    background: linear-gradient(135deg, #ffcdd2, #ef9a9a);
    transform: translateY(-2px);
}

/* ==================== تأثيرات الصفحات ==================== */
.home_button:hover span {
    background-color: #2962ff;
    color: white;
    border-color: #2962ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(41, 98, 255, 0.2);
}

.error-container .button:hover {
    background-color: #1a4fd8;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(41, 98, 255, 0.25);
    letter-spacing: 1px;
}

.copyright_b:hover {
    background: linear-gradient(to right, #43cea2, #2962ff);
}

/* ==================== تأثيرات الأدوات ==================== */
.help_buttons > div:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(41, 98, 255, 0.25);
    background-color: #1a4fd8;
}

.toTop:hover svg.line {
    stroke: white;
    transform: rotate(360deg);
    transition: transform 0.5s ease;
}

.toggled:hover {
    border-color: #1a4fd8;
    background-color: rgba(41, 98, 255, 0.05);
}

.toggled:hover svg.line {
    stroke: #1a4fd8;
}

/* ==================== تأثيرات التحميل ==================== */
.downloadInfo a:hover {
    background-color: #1a4fd8;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(41, 98, 255, 0.25);
    letter-spacing: 0.5px;
}

.downloadInfo:hover {
    border-color: #2962ff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ==================== تأثيرات الشرائح ==================== */
.main_slider img:hover {
    transform: scale(1.08) rotate(0.7deg);
    filter: brightness(1.05) contrast(1.1);
}

/* ==================== تأثيرات الوسائط ==================== */
.lazyYoutube:hover .playBut {
    transform: translate3d(-50%, -50%, 0) scale(1.1);
}

.lazyYoutube:hover .playBut .circle {
    stroke-dashoffset: 0;
    opacity: 1;
    stroke: #2962ff;
}

.lazyYoutube:hover .playBut .triangle {
    stroke-dashoffset: 0;
    opacity: 1;
    animation: pulseTriangle 1s infinite;
}

@keyframes pulseTriangle {
    0%, 100% { stroke-width: 8; }
    50% { stroke-width: 10; }
}

/* ==================== تأثيرات العلامات ==================== */
.postLabel > a:hover {
    color: #1a4fd8;
    text-decoration: underline;
    background-color: rgba(41, 98, 255, 0.05);
    border-radius: 4px;
    padding: 2px 6px;
}

.cloud-label-widget-content .label-size:hover {
    background-color: #2962ff;
    color: white;
    border-color: #2962ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(41, 98, 255, 0.2);
}

.list-label-widget-content ul li:hover .label-name {
    color: #2962ff;
    padding-right: 5px;
}

/* ==================== تأثيرات التاب ==================== */
.post-random .newPost:hover .posttitle {
    color: #1a4fd8;
    padding-right: 10px;
}

.post-random .newPost:hover .posttitle:before {
    color: #2962ff;
    font-weight: 700;
}

/* ==================== تأثيرات ذات صلة ==================== */
.related li:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(41, 98, 255, 0.3);
}

.related li:hover .itemTitle a {
    color: #2962ff;
    text-decoration: underline;
}

.related li:hover .postThumbnail img {
    transform: scale(1.15) rotate(1.5deg);
    filter: brightness(1.1);
}

/* ==================== تأثيرات التمرير ==================== */
::-webkit-scrollbar-thumb:hover {
    background-color: #2962ff;
    width: 10px;
}

/* ==================== تأثيرات خاصة بالموبايل ==================== */
@media (max-width: 768px) {
    .htmlMenu li:hover {
        background-color: rgba(41, 98, 255, 0.1);
        transform: translateX(-5px);
    }
    
    .blogPosts .hentry:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
    
    .zodiac-grid a:hover {
        transform: translateY(-5px) scale(1.03);
    }
}

/* ==================== تأثيرات الرسوم المتحركة ==================== */
@keyframes gentlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes subtleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes colorShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* ==================== تأثيرات أدوات التحكم ==================== */
input[type="checkbox"]:hover + label {
    color: #2962ff;
    cursor: pointer;
}

input[type="radio"]:hover + label {
    color: #2962ff;
    text-decoration: underline;
}

select:hover {
    border-color: #2962ff;
    box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.1);
}

/* ==================== تأثيرات المخططات ==================== */
.svg-c:hover {
    stroke: #1a4fd8;
    stroke-width: 2;
    transition: stroke 0.3s ease;
}

.qw .svg-c:hover {
    fill: #1a4fd8;
    transform: scale(1.1);
}

/* ==================== تأثيرات الشعار ==================== */
.header-widget a.header-image-wrapper:hover img {
    transform: scale(1.05) rotate(1deg);
    filter: brightness(1.1);
}

#Machroo3_Copyright:hover {
    background-color: white;
    transform: rotate(15deg);
    box-shadow: 0 0 0 3px #ff6600;
}

#Machroo3_Copyright:hover svg {
    fill: #ff6600;
    transform: scale(1.1);
}

/* ==================== تأثيرات الإعلانات ==================== */
.qw-ads:hover img {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.ads_place:hover {
    border-color: #2962ff;
    background-color: #f8fafc;
}

/* ==================== تأثيرات البحث ==================== */
.headerSearch input[type="text"]:hover {
    background-color: #f0f0f0;
    border-color: #ddd;
}

.headerSearch button:hover svg {
    stroke: #2962ff;
    stroke-width: 2.5;
    transform: scale(1.1);
}

.Search_close:hover svg {
    stroke: #ff4444;
    transform: rotate(90deg);
}

/* ==================== تأثيرات التنبيهات ==================== */
.post .note:hover {
    transform: translateX(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.post .noteAlert:hover {
    background-color: #ffebee;
    border-right-color: #d32f2f;
}

.post .noteGift:hover {
    background-color: #c8e6c9;
    border-right-color: #388e3c;
}

.post .noteWarning:hover {
    background-color: #fff9c4;
    border-right-color: #fbc02d;
}

/* ==================== تأثيرات الكود ==================== */
.post code:hover, .post pre:hover {
    background-color: #2a2a2a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.command_copy:hover {
    cursor: pointer;
    background-color: #333;
}

.command_copy:hover:before {
    background-color: #1a4fd8;
    color: white;
}

/* ==================== تأثيرات الاقتباس ==================== */
blockquote:hover {
    background-color: rgba(240, 240, 240, 0.8);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

blockquote:hover:before, blockquote:hover:after {
    color: #2962ff;
    transform: scale(1.1);
}

/* ==================== تأثيرات التبويب ==================== */
.tab:hover {
    background-color: rgba(41, 98, 255, 0.1);
    color: #2962ff;
    border-bottom-color: #2962ff;
}

/* ==================== تأثيرات السهم ==================== */
.arrow:hover {
    transform: translateX(5px);
    color: #2962ff;
}

/* ==================== تأثيرات الأيقونات ==================== */
.icon:hover {
    transform: scale(1.2) rotate(5deg);
    filter: brightness(1.2);
}

/* ==================== تأثيرات الفيديو ==================== */
.video-container:hover .play-button {
    transform: scale(1.2);
    background-color: rgba(41, 98, 255, 0.9);
}

/* ==================== تأثيرات النماذج المتقدمة ==================== */
.contact-form-widget form:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.contact-form-error-message-with-border:hover,
.contact-form-success-message-with-border:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ==================== تأثيرات الطابعة ==================== */
@media print {
    *:hover {
        background-color: transparent !important;
        transform: none !important;
        box-shadow: none !important;
    }
}

/* ==================== تأثيرات خاصة بالاتجاه ==================== */
[dir="rtl"] a:hover {
    padding-right: 3px;
}

[dir="ltr"] a:hover {
    padding-left: 3px;
}

/* ==================== تأثيرات النهاية ==================== */
footer .creditInner_container > div:hover {
    transform: translateY(-3px);
}

footer .PageList ul li:hover a {
    color: #2962ff;
    font-weight: 600;
}

/* ==================== تأثيرات الوصول Accessibility ==================== */
a:focus,
button:focus,
input:focus {
    outline: 3px solid #2962ff;
    outline-offset: 3px;
}

/* ==================== تقليل الحركة للمستخدمين ==================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    *:hover {
        transform: none !important;
    }
}

/* تأثيرات تلميحية أخيرة */
*:hover {
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}