/* --- Global Variables (from your theme) --- */
/* (ये वैरिएबल आपके हेडर या मुख्य CSS में पहले से होने चाहिए) */
:root {
    --primary-color: #d32f2f; /* (Example) */
    --secondary-color: #ff5722; /* (Example) */
    --light-bg: #f9f9f9; /* (Example) */
    --text-color: #333; /* (Example) */
}

body {
    background-color: var(--light-bg); /* थीम से मैच करता हुआ */
}

/* --- Homepage Styles --- */
.homepage-content { padding-top: 10px; text-align: center; }
.site-title { font-size: 2.8em; color: var(--text-color); margin-bottom: 5px; font-weight: 800;}
.site-tagline { font-size: 1.2em; color: #555; margin-bottom: 20px; }

.search-bar { 
    display: flex; max-width: 600px; margin: 20px auto; 
    border: 1px solid var(--primary-color); 
    border-radius: 50px; overflow: hidden; background: white; 
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.1); /* बदला हुआ शैडो */
}
.search-bar input { flex-grow: 1; border: none; padding: 15px 25px; font-size: 1em; outline: none; }
.search-bar button { 
    background: var(--primary-color); 
    color: white; border: none; padding: 15px 25px; cursor: pointer; 
    transition: background-color 0.3s; 
}
.search-bar button:hover { background: var(--secondary-color); }

.separator { border: 0; border-top: 1px solid #eee; margin: 30px 0; }

/* Category Styles (Homepage) */
.category-section { margin-bottom: 30px; text-align: center; }
.category-section h2 { margin-bottom: 15px; font-size: 1.8em; color: #333; }
.category-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.category-pills a {
    display: inline-block;
    padding: 6px 15px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    background-color: white;
    font-size: 0.9em;
}
.category-pills a:hover {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 3px 8px rgba(211, 47, 47, 0.3); /* बदला हुआ शैडो */
    transform: translateY(-2px);
}

/* --- Common Tool Grid (Home & Category) --- */
.tool-grid-section h2 { margin-bottom: 20px; font-size: 1.8em; color: #333; }
.tool-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 20px; 
    padding-bottom: 30px; 
}
.tool-card { 
    background: white; border-radius: 10px; padding: 20px 15px; text-align: center; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    display: flex; flex-direction: column; height: 100%;
    border-bottom: 3px solid transparent; /* ✅ एनिमेशन के लिए बेस */
}
.tool-card:hover { 
    transform: translateY(-5px); /* ✅ बदला हुआ एनिमेशन */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* ✅ बदला हुआ एनिमेशन */
    border-bottom: 3px solid var(--primary-color); /* ✅ बदला हुआ एनिमेशन */
}
.tool-icon-container { 
    width: 50px; height: 50px; margin: 0 auto 10px; display: flex; 
    align-items: center; justify-content: center; border-radius: 50%; 
    background-color: var(--light-bg); 
    border: 1px solid #eee;
}
.tool-icon { font-size: 1.8em; color: var(--primary-color); }
.tool-card h3 { font-size: 1.1em; font-weight: 600; line-height: 1.3; margin-bottom: 6px; color: #2c3e50; }
.tool-short-desc { color: #666; font-size: 0.85em; margin-bottom: 0; flex-grow: 1;}
.tool-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%;} 


/* --- Category Page Styles --- */
.category-page-header { text-align: center; margin-bottom: 25px; padding-top: 20px; }
.category-page-header h1 { font-size: 2em; color: var(--primary-color); margin-bottom: 8px; }
.category-page-header p { font-size: 1em; color: #555; max-width: 700px; margin: 0 auto; }
.back-to-categories { display: inline-block; margin-top: 20px; color: var(--secondary-color); text-decoration: none; font-weight: 600;}
.back-to-categories:hover { text-decoration: underline; }


/* --- Tool Page Styles --- */
/* ✅ .tool-page-container से padding हटा दिया गया */
.tool-page-container { 
    /* padding: 20px 0; */ 
}
.tool-page-container h1 { text-align: center; color: var(--primary-color); margin-bottom: 20px; font-size: 2em;}
.ad-slot-container { margin: 15px auto; text-align: center; max-width: 900px; }

/* ✅ .tool-function-area से सभी स्टाइल हटा दिए गए ताकि यह फुल-स्क्रीन हो सके */
.tool-function-area { 
    /* background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); margin-bottom: 20px; */ 
}


/* --- Static Page Styles --- */
.static-page-container { padding: 30px 0; }
.static-page-container h1 { color: #2c2c2c; text-align: center; margin-bottom: 20px; font-size: 2em;}
.page-content { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); line-height: 1.7; }
.page-content h2 { color: var(--primary-color); margin-top: 20px; margin-bottom: 10px; font-size: 1.5em; border-bottom: 1px solid #eee; padding-bottom: 8px;}
.page-content h3 { color: #333; margin-top: 15px; margin-bottom: 8px; font-size: 1.2em;}
.page-content p { margin-bottom: 10px; color: #555;}
.page-content ul, .page-content ol { margin-left: 25px; margin-bottom: 10px; color: #555;}
.page-content li { margin-bottom: 6px; }
.page-content a { color: var(--secondary-color); text-decoration: none; }
.page-content a:hover { text-decoration: underline; }


/* --- 404 Page Styles --- */
.not-found-container { text-align: center; padding: 60px 20px; }
.not-found-container h1 { font-size: 5em; color: #e74c3c; margin-bottom: 5px; font-weight: 800;}
.not-found-container h2 { font-size: 1.8em; color: #333; margin-bottom: 10px;}
.not-found-container p { font-size: 1em; color: #666; margin-bottom: 20px;}
.not-found-container .btn-home {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s;
}
.not-found-container .btn-home:hover { background-color: var(--secondary-color); }