/* --- Meta Box Styles --- */
.seo-by-dt-score-meter { width:100%; height:20px; border-radius:10px; background:#eee; overflow:hidden; margin-bottom:10px; }
.seo-by-dt-score-fill { height:100%; width:0; transition: width 0.6s ease, background 0.6s ease; }
.seo-by-dt-toggle-section { border-top:1px solid #ddd; margin-top:10px; cursor:pointer; padding:5px 0; display:flex; justify-content:space-between; align-items:center; }
.seo-by-dt-toggle-section:hover { background:#f0f0f0; }
.seo-by-dt-section-content { display:none; padding:10px; margin-top: -5px; border: 1px solid #eee; border-top: 0; background: #fafafa; max-height: 200px; overflow:auto; font-size:12px; }
.seo-by-dt-recheck-btn { margin-top:10px; display:inline-block; }

/* --- Dashboard Required Plugins Styles --- */
.required-plugins-wrapper {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}
.plugin-box {
    flex: 1 1 calc(25% - 20px);
    min-width: 180px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    background: #f9f9f9;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.plugin-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.plugin-box img {
    max-width: 80px;
    max-height: 80px;
    margin-bottom: 10px;
}
.plugin-box h3 {
    font-size: 16px;
    margin-bottom: 8px;
}
.plugin-box a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 5px;
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}
.plugin-box a:hover {
    background: #005177;
}

/* --- Responsive Styles --- */
@media (max-width: 768px) {
    .plugin-box { flex: 1 1 45%; }
}
@media (max-width: 480px) {
    .plugin-box { flex: 1 1 100%; }
}