/* --- تنظیمات پایه --- */  
body {  
    font-family: "Arial", sans-serif;  
    background-color: #f5f5f5;  
    color: #333;  
    margin: 0;  
    direction: rtl;  
    text-align: center;  
}  

header {  
    background-color: #3a3b56;  
    color: white;  
    padding: 20px 0;  
}  

#theme-toggle {  
    margin: 15px auto;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    gap: 10px;  
}  

#theme-toggle span {  
    font-size: 1.5rem;  
}  

#search-container {  
    display: flex;  
    justify-content: center;  
    margin-top: 10px;  
    gap: 10px;  
}  

#search-container input {  
    width: 60%;  
    padding: 10px;  
    border-radius: 10px;  
    text-align: right;  
    border: 1px solid #ddd;  
}  

#categories-grid {  
    display: flex;  
    justify-content: center;  
    gap: 15px;  
    margin: 20px 0;  
    flex-wrap: wrap;  
}  

.category {  
    padding: 10px 15px;  
    background-color: white;  
    border: 1px solid #ddd;  
    border-radius: 20px;  
    cursor: pointer;  
    transition: all 0.3s ease;  
}  

.category:hover, .category.active {  
    background-color: #3498db;  
    color: white;  
}  

/* --- کارت نام‌ها --- */  
#names-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  
    gap: 20px;  
    margin: 20px;  
    padding: 10px;  
}  

.name-card {  
    background-color: white;  
    padding: 15px;  
    border-radius: 10px;  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);  
    transition: all 0.3s ease;  
    cursor: pointer;  
    position: relative;  
}  

.name-card:hover {  
    transform: scale(1.05);  
    border: 2px solid #2ecc71;  
}  

.name-card:hover::after {  
    content: '';  
    border: 2px solid #2ecc71;  
    position: absolute;  
    top: -10px;  
    left: -10px;  
    width: calc(100% + 20px);  
    height: calc(100% + 20px);  
    box-sizing: border-box;  
    border-radius: 10px;  
    animation: border-fade 0.5s ease forwards;  
}  

@keyframes border-fade {  
    0% {  
        opacity: 0;  
    }  
    100% {  
        opacity: 1;  
    }  
}  

/* --- پاپ‌آپ جزئیات --- */  
#name-popup {  
    display: none;  
    position: fixed;  
    top: 50px;  
    left: 50%;  
    transform: translateX(-50%);  
    background: white;  
    padding: 15px;  
    width: 300px;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  
    border-radius: 10px;  
    text-align: right;  
    z-index: 1000;  
}  
#name-popup h3 {  
    color: #333;  
    margin-bottom: 10px;  
}  
#name-popup button {  
    background: red;  
    color: white;  
    border: none;  
    padding: 10px 15px;  
    border-radius: 5px;  
    float: left;  
    cursor: pointer;  
}

/* --- محاسبه عدد ابجد --- */  
#abjad-section {  
    margin-top: 30px;  
    text-align: center;  
    background-color: #f7f7f7;  
    padding: 20px;  
    border-radius: 10px;  
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);  
}  

#abjad-calculator {  
    margin-top: 15px;  
    display: flex;  
    justify-content: center;  
    gap: 10px;  
}  

#abjad-calculator input {  
    padding: 10px;  
    font-size: 16px;  
    border-radius: 10px;  
    border: 1px solid #ddd;  
    width: 300px;  
    text-align: right;  
}  

#abjad-calculator button {  
    padding: 10px 15px;  
    border: none;  
    border-radius: 10px;  
    background-color: #2ecc71;  
    color: white;  
    cursor: pointer;  
    font-size: 16px;  
    transition: all 0.3s ease;  
}  

#abjad-calculator button:hover {  
    background-color: #27ae60;  
}  

#abjad-result {  
    margin-top: 20px;  
    font-size: 20px;  
    font-weight: bold;  
    color: #333;  
}

#alphabet-filter {  
    margin: 30px auto;  
    text-align: center;  
    padding: 15px;  
    background-color: #f5f5f5;  
    border-radius: 10px;  
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);  
}  

#alphabet-grid {  
    display: flex;  
    justify-content: center;  
    flex-wrap: wrap;  
    gap: 10px;  
}  

.alphabet {  
    font-size: 18px;  
    padding: 10px 20px;  
    background-color: white;  
    border: 1px solid #ddd;  
    border-radius: 10px;  
    transition: 0.3s ease;  
    cursor: pointer;  
}  

.alphabet:hover {  
    background-color: #3498db;  
    color: white;  
}

.nav-item {  
    text-decoration: none;  
    color: #333; /* رنگ متن */  
    padding: 10px 15px; /* فاصله داخلی */  
    border-radius: 5px; /* گوشه‌های گرد */  
    transition: background-color 0.3s; /* انیمیشن تغییر رنگ */  
}  

.nav-item:hover {  
    background-color: #f0f0f0; /* رنگ پس‌زمینه هنگام هاور */  
}  

.home-button {  
    background-color: #007bff; /* رنگ پس‌زمینه دکمه صفحه اصلی */  
    color: white; /* رنگ متن دکمه */  
}  

.home-button:hover {  
    background-color: #0056b3; /* رنگ پس‌زمینه دکمه صفحه اصلی هنگام هاور */  
}  

.back-button {  
    background-color: #28a745; /* رنگ پس‌زمینه دکمه صفحه قبل */  
    color: white; /* رنگ متن دکمه */  
}  

.back-button:hover {  
    background-color: #218838; /* رنگ پس‌زمینه دکمه صفحه قبل هنگام هاور */  
}