/* css/tools.css */

/* =========================================
   1. التنسيقات الأساسية (الوضع النهاري - Default)
   ========================================= */

/* --- Hero Section --- */
.tools-hero {
    padding: 100px 0 60px;
    min-height: 40vh;
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    background-image: radial-gradient(circle at top center, rgba(217, 4, 41, 0.05) 0%, #f8f9fa 70%);
    text-align: center;
    transition: background 0.3s ease;
}

.tools-hero h1 { font-size: 3.5rem; margin-bottom: 15px; color: #111; font-weight: 800; }
.tools-hero h1 span { color: #D90429; }
.tools-hero p { font-size: 1.1rem; color: #555; max-width: 650px; margin: 0 auto 40px; }

.tools-badge {
    color: #D90429;
    background: rgba(217, 4, 41, 0.1);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.9rem; font-weight: bold;
    display: inline-block; margin-bottom: 25px;
    border: 1px solid rgba(217, 4, 41, 0.3);
}

/* --- Search Box --- */
.search-wrapper { position: relative; max-width: 600px; margin: 0 auto; }

.search-wrapper input {
    width: 100%; padding: 18px 60px 18px 25px;
    border-radius: 50px; border: 2px solid #e0e0e0;
    font-size: 1rem; background: #ffffff; color: #111;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); outline: none;
    transition: all 0.3s ease; font-family: 'Tajawal', sans-serif;
}
.search-wrapper input:focus { border-color: #D90429; box-shadow: 0 0 20px rgba(217, 4, 41, 0.15); }
.search-icon { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: #777; }

/* --- Main Container & Layout --- */
.main-tools-container {
    padding: 60px 20px 100px;
    background-color: #f8f9fa;
    min-height: 100vh;
    transition: background 0.3s ease;
}

.tool-category-section { margin-bottom: 70px; animation: fadeInUp 0.5s ease; }

.category-header {
    display: flex; align-items: center; gap: 15px;
    margin-bottom: 30px; border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
}
.category-header h2 { font-size: 1.6rem; margin: 0; color: #111; font-weight: 700; }
.category-header .cat-icon {
    width: 45px; height: 45px; background: #fff;
    border: 1px solid #e0e0e0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #D90429;
}

/* --- Tool Cards --- */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.tool-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 16px; padding: 30px 20px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
}

.tool-card:hover { transform: translateY(-7px); border-color: #D90429; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

.tool-card .icon-box {
    width: 60px; height: 60px; background: rgba(128, 128, 128, 0.1);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #D90429; margin-bottom: 15px; transition: 0.3s;
}
.tool-card:hover .icon-box { background: #D90429; color: #fff; transform: scale(1.1); }

.tool-card h3 { font-size: 1.1rem; margin: 0 0 8px; color: #111; font-weight: 700; transition: color 0.3s; }
.tool-card span { font-size: 0.85rem; color: #777; font-weight: 500; }
.tool-card:hover h3 { color: #D90429; }


/* ==========================================================
   2. إصلاحات الدارك مود (متوافقة مع global.css)
   استخدام [data-theme="dark"] بدلاً من body.dark-mode
   ========================================================== */

/* الخلفيات الرئيسية */
[data-theme="dark"] .tools-hero {
    background-color: #0a0a0a !important;
    background-image: radial-gradient(circle at top center, rgba(0,0,0,0.8) 0%, #0a0a0a 70%) !important;
}

[data-theme="dark"] .main-tools-container {
    background-color: #0a0a0a !important;
    /* إصلاح قوي لضمان عدم ظهور الأبيض */
    background: #0a0a0a !important; 
}

/* النصوص */
[data-theme="dark"] .tools-hero h1 { color: #ffffff !important; }
[data-theme="dark"] .tools-hero p { color: #cccccc !important; }

/* مربع البحث */
[data-theme="dark"] .search-wrapper input {
    background-color: #151515 !important;
    color: #fff !important;
    border-color: #333 !important;
}

/* عناوين الأقسام */
[data-theme="dark"] .category-header h2 { color: #ffffff !important; }
[data-theme="dark"] .category-header { border-bottom-color: #333 !important; }
[data-theme="dark"] .category-header .cat-icon { 
    background-color: #151515 !important; 
    border-color: #333 !important; 
}

/* الكروت (البطاقات) */
[data-theme="dark"] .tool-card {
    background-color: #151515 !important;
    border-color: #333 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .tool-card:hover { 
    border-color: #D90429 !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

[data-theme="dark"] .tool-card h3 { color: #e0e0e0 !important; }
[data-theme="dark"] .tool-card span { color: #888888 !important; }
[data-theme="dark"] .tool-card .icon-box { background-color: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .tool-card:hover .icon-box { background-color: #D90429 !important; }
[data-theme="dark"] .tool-card:hover h3 { color: #ffffff !important; }

/* Responsive */
@media (max-width: 768px) {
    .tools-hero { padding: 80px 0 40px; }
    .tools-hero h1 { font-size: 2.2rem; }
    .tools-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
    .tool-card { padding: 20px 15px; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}